Ajax+js implement asynchronous interactive _ajax related

When it comes to asynchronous interaction, you can say Ajax, as if the Ajax technology has become synonymous with asynchronous interaction. The following will study the core objects of Ajax!

Using AJAX to implement asynchronous interaction is nothing more than 4 steps:

1. Create Ajax Core Objects
2. Establishing a connection to the server
3. Send a request to the server
4. Data received from the server response

Seemingly mysterious asynchronous interaction when it is clear that these 4 steps, perhaps in the minds of everyone already have a preliminary thinking

First we create Ajax core objects, and because of our browser compatibility issues we don't have to consider compatibility issues when we create Ajax core objects, because the next steps to implementing asynchronous interaction are based on the success of the first step in creating the Ajax core object.

 function getxhr () {
      //declaring XMLHttpRequest object
      var xhr = null;
      Create an if window, depending on the browser's situation
       . XMLHttpRequest) {
      //means other browsers other than IE
           XHR = new XMLHttpRequest ();
       } else{
         //means IE browser
         xhr = new ActiveXObject (' microsoft.xmlhttp ');
       }
       return xhr;
 }
 Create a Core object
 var xhr = getxhr ();    

With the above code we have successfully created the Ajax core object, we save in the variable XHR, the next mentioned Ajax core objects will be replaced by XHR.

The second step is to establish a connection with the server and invoke the open (Method,url,async) method via the Ajax core object.

The formal parameter interpretation of the Open method:

Method represents the request (get or POST)

The URL represents the requested PHP address (note that when the request type is get, the requested data is followed by a question mark following the URL address, and the null value is passed in the Send method below)

Async is a Boolean value that indicates whether it is asynchronous, and the default is true. In the latest specification, this item is no longer required, because the authorities believe that using AJAX is to achieve asynchrony.

Xhr.open ("Get", "01.php?user=xianfeng");//This is the Get way request data
Xhr.open ("Post", "01.php");//This is a post-request data

In the third step we will send a request to the server using the Ajax core object to invoke the Send method

In the case of post, the requested data is sent to the server in Name=value form in the Send method, and the Get method passes directly to the null value

Xhr.send ("User=xianfeng");//This is a post-send request data
xhr.send (null);//This is a get way

Step fourth the receiving server responds to the data and uses the onReadyStateChange event to listen for the communication status of the server. Gets the current communication state of the server side through the ReadyState property. Status Gets the state code, Use the ResponseText property to receive the data that the server responds to (in this case, the string format data of the text type). Later, write XML-formatted data and the well-known JSON format data.

Xhr.onreadystatechange = function () {
   //Ensure that the server-side response data is sent over to ensure that the request must be successful
             if (xhr.readystate = = 4&　　　　　　 &xhr.status = =
          //Receive server-side data
          var = xhr.responsetext;
          Test
          Console.log (data);
              } 
             };