A 3-point summary of the principles of AJAX technology _ajax related

ajax:asynchronous JavaScript and XML asynchronous JavaScript and XML.

is a Web development technology that creates interactive Web applications.

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:

Copy Code code as follows:

function createxmlhttp () {
//non-IE browser creates a XMLHttpRequest object method
if (Windo W.xmlhttprequest) {
        xmlhttp = new XMLHttpRequest ();
   }
//ie Browser to create a XMLHttpRequest object
if window. ActiveXObject) {
try {
            xmlhttp = new Active Xobject ("Microsoft.XMLHTTP");
       }
catch (E) {
    try {
           & nbsp;    xmlhttp = new ActiveXObject ("MSXML2. XMLHTTP ");
            }
    catch (ex)
            {}
&nb sp;      }
   }
}

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

2.3 Simple Demo Examples:

Copy Code code as follows:

function Sendasyncrequest () {
var data = document.getElementById ("Xxid"). Value;
Createxmlhttp (); Creating XMLHttpRequest Objects
if (!xmlhttp) {//To determine whether 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 = 200) {
document.getElementById ("Xxshowid"). InnerHTML = xmlhttp.   ResponseText; Data received complete
}
}
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).