Summary of Ajax technical principles and ajax3

Summary of Ajax technical principles and ajax3

Ajax: Asynchronous Javascript and XML.

Is a web development technology used to create interactive web applications.

1.0 advantages:
1.1 The asynchronous mode improves user experience.
1.2 optimizes the transmission between the browser and the server, reduces unnecessary data round-trips, and reduces bandwidth usage.
1.3 The Ajax engine runs on the client and undertakes a group of servers, reducing the server load for a large number of users.

2.0 working principle

The core of Ajax is the Javascript Object XmlHttpRequest. This object is first referenced in ie5. it is a technology that supports asynchronous requests. XmlHttpRequest allows you to use Javascript to send requests to the server and process the response, instead of blocking users, to achieve a refreshing effect.
Because of the differences between browsers, the methods for creating XmlHttpRequest objects are also different (mainly the differences between IE and other browsers ).
 
2.1 General method for creating asynchronous requests:

Copy codeThe Code is as follows:
Function CreateXmlHttp (){
// Method for creating the XmlHttpRequest object in a non-IE browser
If (window. XmlHttpRequest ){
Xmlhttp = new XmlHttpRequest ();
}
// Method for creating 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 attributes:

Onreadystatechange the event handler of the event triggered by each state change.

The string format of responseText returned data from the server process.

ResponseXML is a DOM-compatible document data object returned by the server process.

Status Code returned from the server, such as common 404 (not found) and 200 (ready)

String information of the status Text accompanied by the status code

ReadyState object status value

0 (not initialized) the object has been created, but has not been initialized (the open method has not been called)

1 (initialization) the object has been created and the send method has not been called

2 (send data) The send method has been called, but the current status and http header are unknown.

3 (in data transmission) Some data has been received. Because the response and http headers are incomplete, an error occurs when retrieving part of data through responseBody and responseText,

4. After receiving the data, you can use responseXml and responseText to obtain the complete response data.

2.3 simple Demo example:

Copy codeThe Code is as follows:
Function SendAsyncRequest (){
Var data = document. getElementById ("XXId"). value;
CreateXmlHttp (); // create an XmlHttpRequest object
If (! Xmlhttp) {// determine whether the object is successfully created
Alert ("An error occurred while creating the xmlhttp object! ");
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; // The data has been received.
}
}
Xmlhttp. send ();
}

3.0 disadvantages:

1. The normal behavior of the browser's back button is damaged. After the page is dynamically updated, the status of the previous page cannot be returned.
2. Javascript is used as the basic engine of Ajax, and Javascript compatibility is not very good. (Of course, the popular javascript class libraries such as Jquery have greatly improved these problems and made it much easier to call Ajax. This article only briefly describes the basic implementation principles of Ajax ).