Ajax native authoring of asynchronous interactions

When it comes to asynchronous interaction, you'll say Ajax, as if the technology of Ajax has become synonymous with asynchronous interaction. That's the core object of Ajax!

Using AJAX to achieve asynchronous interaction is nothing but 4 steps:

1. Creating an Ajax Core object

2. Establish a connection to the server

3. Send a request to the server

4. Receiving server response data

Seemingly mysterious asynchronous interactions when you clear these 4 steps, you may have a tentative idea in mind.

First we create the core object of Ajax, because of the compatibility of the browser we should not consider the compatibility problem when creating the Ajax core object, because the next steps to implement the asynchronous interaction are based on the successful creation of the Ajax core object in the first step.

 functiongetxhr () {//declaring XMLHttpRequest Objects            varXHR =NULL; //created according to different scenarios of the browser             if(window. XMLHttpRequest) {//represents a browser other than IEXHR =NewXMLHttpRequest (); }Else{                 //represents IE browserXHR =NewActiveXObject (' Microsoft.XMLHTTP '); }             returnXHR;} //Create a Core object varXHR = GETXHR ();

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

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

The formal parameter interpretation of the Open method:

method indicates the request method (get or post)

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

Async is a Boolean value that indicates whether it is asynchronous, and the default is true. This item is no longer required in the latest specification because it is officially assumed that Ajax is used to achieve asynchrony.

Xhr.open ("Get", "01.php?user=xianfeng"); // This is the Get method request data

Xhr.open ("Post", "01.php"); // This is a POST request for data

The third step is to send a request to the server using the Ajax core object to call 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 sending the request data by post

Xhr.send (null); // This is in Get mode

The fourth step receives the server's response back to the data, using the onReadyStateChange event to listen to the server's communication status. Gets the server-side current communication status through the ReadyState property. Status obtains the state code, Use the ResponseText property to receive the data returned by the server response (this refers to the text type of string format data). Then write the XML format data and the famous JSON format data.

function () {     　　　　　　　　　　　　　　　// to ensure that the data sent by the server-side response is complete, that the request must be successful                         if(xhr.readystate = = 4&& Xhr.status = =) {                    　　　　　　//  receive server-side data                    var = Xhr.responsetext;                    //  test                    console.log (data);                           }                            };　　　　　　　　　

Ajax native authoring of asynchronous interactions