Technical Principles of AJAX

I asked about Ajax yesterday. I replied, isn't it an asynchronous communication method provided by the jquery framework. I was dumb when I asked about the principle. In fact, I only used Ajax technology during my internship. It is very convenient. It does not need to refresh the page every time it is updated. The server can be requested asynchronously. Use the callback function to process the program.

In the jquery API documentation, we can see a simple demo.

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   }});

We can see that this code is probably using the POST request some. php method. The input parameter is written in the format of name = John & location = Boston. The data parameter can also be expressed in the form of {FOO: ["bar1", "bar2. However, it is automatically converted to the previous format when sent.

So how can I implement such an Ajax request using JS?

The XMLHTTPRequest object is used for implementation. However, different browsers use different methods to obtain this object.

We can see that there are open methods and send methods. There is also an onreadystatechange attribute. This attribute allows you to set the callback function. You can write an anonymous function or a function name. If you want to send a parameter to the server, you can use the setRequestHeader method to set the key value. The status code and information can also be obtained in the callback function. For example, the success status code is 200. The redirection is 302. The failure is 404. Using these things, we can write a simple implementation.

Function createxmlhttp () {// create the XMLHTTPRequest object if (window. XMLHttpRequest) {XMLHTTP = new XMLHttpRequest ();} // create the XMLHTTPRequest object if (window. activexobject) {try {XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");} catch (e) {try {XMLHTTP = new activexobject (" msxml2.xmlhttp ");} catch (Ex) {}}} function ustbwuyi () {var DATA = document. getelementbyid ("username "). value; createxmlh TTP (); If (! XMLHTTP) {alert ("An error occurred while creating the XMLHTTP object! "); Return false;} XMLHTTP. open ("Post", URL, false); XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4) {document. getelementbyid ("user1 "). innerhtml = "data loading... "; if (XMLHTTP. status = 200) {document. write (XMLHTTP. responsetext) ;}} XMLHTTP. send ();}

The online code is referenced here. Let's analyze it briefly. First, we get the XMLHTTPRequest object. The following code identifies the browser. Several if else statements are used. Then we set the request method, URL, and transmission method. "False" indicates synchronization, and "true" indicates asynchronous. Then we wrote a callback function. Tell this callback function. The following code is executed only when the interaction status is 4. Here, we have determined the return status code. The following code is executed only when success is used. It seems that I forgot to use XMLHTTP. setrequesthander ("username", data); To set the key-value for the request.

Technical Principles of AJAX