An analysis of Ajax concepts, technical principles and application examples

AJAX "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML) is a technique used to create fast dynamic Web pages.

1.0 Advantages:
1.1 improves the user experience through asynchronous mode.
1.2 optimizes the transmission between the browser and the server, reduces the unnecessary data round-trip, reduces the bandwidth occupation.
The 1.3 Ajax engine runs on the client, taking on a portion of the group that was originally assumed by the server, thereby reducing the server load under large user capacity.

2.0 Working principle
The Ajax core is the JavaScript object XMLHttpRequest. The object is first referenced in IE5, which is a technology that supports asynchronous requests. XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response instead of blocking the user and achieving no refreshing effect.
Because of the differences between browsers, there are also differences in how the XMLHttpRequest objects are created (mainly the differences between IE and other browsers).

2.1 Compare the generic method of creating asynchronous requests:

The code is as follows	Copy Code
function Createxmlhttp () { Methods for creating XMLHttpRequest objects in non-IE browsers if (window. XMLHttpRequest) { XMLHTTP = new XMLHttpRequest (); } How to create a XMLHttpRequest object in IE browser if (window. ActiveXObject) { try { XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (e) { try { XMLHTTP = new ActiveXObject ("MSXML2. XMLHTTP "); } catch (ex) { } } } }

2.2 XMLHttpRequest Related properties:

onReadyStateChange the event handler for the event that triggers each state change.
ResponseText A string form that returns data from a server process.
Responsexml a DOM-compliant document data object returned from a server process.
Status number code returned from the server, such as common 404 (not Found) and 200 (ready)
Status Text string information accompanying the status code
ReadyState Object State Value
0 (uninitialized) object established, but not initialized (the open method has not been called)
1 (initialization) object established, send method has not been called
2 (send data) The Send method has been invoked, but the current state and HTTP headers are unknown
3 (data transfer) has received part of the data, because the response and HTTP headers are incomplete, then get some data through Responsebody and ResponseText error,
4 (complete) data received, at this time through Responsexml and responsetext to obtain complete response data

The code is as follows

Copy Code

function Sendasyncrequest () { var data = document.getElementById ("Xxid"). Value;     createxmlhttp ();  //Create XMLHttpRequest Object if (!xmlhttp) {        //Determine if the object was created successfully        alert ("Create XMLHTTP Object exception!") ");     return false;    }     xmlhttp.open ("POST", URL, False);  //Start sending asynchronous requests     Xmlhttp.onreadystatechange = function () {   if (xmlhttp.readystate = 4 && xmlhttp.status =) {             document.getElementById ("Xxshowid"). InnerHTML = xmlhttp. responsetext;  //Data received        }    }     xmlhttp.send ();   }

3.0 Disadvantages:

1. Break the normal behavior of the browser Back button, dynamic update the page, unable to return to the previous page state.
2. JavaScript is not a good compatibility with JavaScript as the base engine for Ajax. (Of course, now the popular jquery and other JavaScript libraries have greatly improved these issues, the invocation of Ajax is also convenient for a lot, this article is only a brief description of the basic implementation of AJAX principles).