Analysis of Ajax Technical Principles

Ajax is not a technology, but an interactive Web operation mode. At the same time, Ajax is not something new in the past two years, because all components that implement Ajax applications have been in our browser for several years.

The following sequence diagram clearly shows the process of data exchange between the client and the server using Ajax.

Ajax interacts with the server through the XMLHTTPRequest object built in the browser. Note that the methods for creating the XMLHTTPRequest object may be different in different browsers, the following code ensures that this object is created in most browsers:

/**//*
* Returns a new XMLHTTPRequest object, or false if this Browser
* Doesn' t support it
*/
Function newxmlhttprequest ()
...{
VaR xmlreq = false;
If (window. XMLHttpRequest)
...{
// Create XMLHTTPRequest object in non-Microsoft browsers
Xmlreq = new XMLHttpRequest ();
}
Else if (window. activexobject)
...{
// Create XMLHttpRequest via MS ActiveX
Try
...{
// Try to create XMLHttpRequest in later versions
// Of Internet Explorer
Xmlreq = new activexobject ("msxml2.xmlhttp ");
}
Catch (E1)
...{
// Failed to create required activexobject
Try
...{
// Try version supported by older versions
// Of Internet Explorer
Xmlreq = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (E2)
...{
// Unable to create an XMLHttpRequest with ActiveX
}
}
}
Return xmlreq;
}

The XMLHTTPRequest object readystate attribute indicates the lifecycle status of an Ajax request, which changes from 0 (indicating "not initialized") to 4 (indicating "completed "). Each time the readystate attribute changes, the readystatechange event is triggered, and the event processing callback function specified by the onreadystatechange attribute is called.

The status attribute of the XMLHTTPRequest object indicates whether the request is successfully completed. The status attribute points to the HTTP status return code of the server response. When executing simple get and post requests, we can assume that any return code greater than 200 is incorrect.

If the server sends a redirection response (for example, 301 or 302), the browser transparently redirects and obtains resources from a new location. XMLHttpRequest does not see the redirected status code. In addition, the browser automatically adds the "cache-control: No-Cache" header to all XMLHttpRequest, so that the client code will never process the 304 (unmodified) server response.

It should be noted that only when the HTTP status response code is 200 (OK) indicates that the server returns the correct processing result and then executes the client response code.