The creation of Ajax request objects and the four "handshakes" between them and the server (well, there are only three requests)

Create a request object

When a request object is created, the following statements are always immediately reflected.

var request=new XMLHttpRequest();

However, it is not that simple because of the fierce competition between various browsers.

For example, the Internet Explorer does not have the XMLHttpRequest function.

However, this is hard for our smart and witty programmers. We also have classic countermeasures:

function createRequest(){    try{        request=new XMLHttpRequest();    }catch(tryMS){        try{            request=new ActiveXObject("Msxml2.XMLHTTP");        }catch(otherMS){            try{                request=new ActiveXObject("Microsoft.XMLHTTP");            }catch(failed){                request=null;            }        }    }    return request;}var request=createRequest();

This method is compatible with various browsers and can be added to your utils. js favorites.

Several "handshakes" between the request object and the server"

In essence, the request object first requests to the browser, and then the browser requests to the server. Then the Server gives feedback and the browser changes the request object after receiving the response.

The first is the checkname. PHP code:

<?php$takenUsernames = array (‘bill‘, ‘ted‘);sleep(2);if (!in_array( $_REQUEST[‘username‘], $takenUsernames )) {echo ‘okay‘;} else {echo ‘denied‘;}?>

Note sleep (2.

Then the JavaScript code:

function checkUsername(){    var url="checkName.php?username="+userName;    request.onreadystatechange=showUsernameStatus;    request.open("GET",url,true);    request.send(null);}function showUsernameStatus(){    console.info((new Date)+"request.readyState : "+request.readyState+"request.responseText : "+request.responseText);}

When checkusername is executed and username is not "bill" or "Ted", you can see in the console:

Mon Aug 25 2014 21:37:01 GMT + 0800 (China Standard Time) request. readystate: 1 request. responsetext: Mon Aug 25 2014 21:37:03 GMT + 0800 (China Standard Time) request. readystate: 2 request. responsetext: Mon Aug 25 2014 21:37:03 GMT + 0800 (China Standard Time) request. readystate: 3 request. responsetext: Mon Aug 25 2014 21:37:03 GMT + 0800 (China Standard Time) request. readystate: 4 request. responsetext: Okay

We can see that the request. onreadystatechange event was triggered four times. These four operations are as follows:

First time: request. Open ("get", URL, true) is executed, request. readystate is 1, and the request is ready to be sent

Second: request. readystate is 2, indicating that the server has received the request and is processing it

Third time: request. readystate is 3, data is downloaded to the request object, but the corresponding data is not fully prepared and cannot be used

Fourth: request. readystate is 4. After the server completes processing the request, data can be used. You can see that the value of "okay" already exists in request. responsetext.

The above is the four "handshakes" between the request and the server ".

If we cannot get the returned data during Ajax programming, we can check the value of the readystate attribute of the request object to know where the processing on the server is and where the problem occurs.

The creation of Ajax request objects and the four "handshakes" between them and the server (well, there are only three requests)