The internal realization mechanism, principle and practice summary of Ajax _ajax related

One, what is Ajax
Ajax is all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), Ajax is not a technology, it is actually several technologies, each technology has its own unique this, together becomes a powerful new technology. As a Web development technology for creating interactive Web applications, it has the following features:
Use XHTML+CSS to represent information
Dynamic display and interaction using the JavaScript operations Dom (Document Object Model)
Data exchange and related operations using XML and XSLT
Asynchronous data exchange with a Web server using the XMLHttpRequest object
Use JavaScript to bind all things together
Using SOAP to transfer method names and method parameters in XML format
Like DHTML or Lamp,ajax is not a single technology, but an organic use of a range of related technologies. In fact, some Ajax-based "derivation/Synthesis" (derivative/composite) technologies are emerging, such as "Aflax".
Ajax applications use a Web browser that supports the above technologies as a running platform. These browsers currently include: Mozilla, Firefox, Internet Explorer, Opera, Konqueror, and Mac OS Safari. However, Opera does not support XSL format objects, nor does it support XSLT. (Excerpt from: Http://zh.wikipedia.org/zh-cn/AJAX)


second, the birth of Ajax background, why use Ajax
We all know that after a user creates a request through the browser, this request through the HTTP protocol, to the server to request the resources, if it is a picture link, then the request is a picture resource, if it is a file link, then the request is a file resource, in most cases, the request is the entire Web page, Web page also according to its own HTML code, request the specific resources, such as pictures, audio and so on. With the development of the Web site, the user volume is increasing, the pressure on the server is also increasing, which exposes a problem, that is: Most users in the request for resources, the new request of the page, and the current page has a lot of the same place. However, because the request is the entire Web page, it will retrieve all the resources from the server (of course, a lot of pictures, files and so on will be from the client), which is a big waste.
In order to solve this problem, Ajax was born, its main role is, through the XMLHttpRequest object to obtain server resources, local refresh users are browsing the page, greatly reducing the pressure on the server, because only to get the resources need to update, relative to the entire page of resources, Browsers also significantly reduce the amount of data interaction between servers (about 5% of the original), greatly speeding up the loading of the page.

Iii. The history of Ajax
The technology originally belonged to a Microsoft research and development team, designed to allow clients to send HTTP requests, developed, but not widely used. After Google's extensive use of its applications for asynchronous communication interaction, such as the Google discussion group, Google Maps, and so on, the word Ajax by the "ajax:a New approach to WEB applications," the article was created, The rapid spread of the article raised awareness of the use of the technology, and then came the crazy Ajax revolution.

Four, Ajax practice
The main point of AJAX is the XMLHttpRequest object, and all implementations are manipulated by XMLHttpRequest objects. But in the browser wars today, different browsers create XMLHttpRequest objects in a way that differs. IE browsers use ActiveXObject, while other browsers use JavaScript-built objects named XMLHttpRequest.

Copy Code code as follows:

Mozilla, Safari,opera 8.0+ ...
function Ajaxfunction () {
var http_request;
if (window. XMLHttpRequest) {
Http_request = new XMLHttpRequest ();
else if (window. ActiveXObject) {
Ie
try {
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {
Alert ("Your browser does not support Ajax");
return false;
}
}
Http_request.onreadystatechange = alertcontents;
Http_request.open (' Get ', url, true);
Http_request.send (NULL);
}
function alertcontents () {
if (http_request.readystate = = 4) {
if (Http_request.status = = 200) {
alert (Http_request.responsetext);
} else {
Alert (' There is a problem with the request. ');
}
}
}

Explanation: First create a XMLHttpRequest object http_request if Windows is supported. XMLHttpRequest, the object is created with the new XMLHttpRequest (). This statement is intended for Firefox, Opera, and Safari browsers and, if not supported, attempts to create xmlhttprequest for the msxml2.xmlhttp component of Internet Explorer 6.0+, if not supported, then attempt to The Microsoft.XMLHTTP component of Internet Explorer 5.5+, if it is still not supported, indicates that the user's browser version is too low to prompt the user "your browser does not support Ajax."
The XMLHttpRequest object's onReadyStateChange method is used to handle this response when the state changes to the method to be executed.
The status of the readystate is:
0 Request not initialized (before open ())
1 request has been raised and is being loaded (before calling send ())
2 loading completed, request sent (usually from the response to get the content of the head)
3 interaction, in request processing (usually some of the data is available in the response, but the server has not yet completed the response)
4 request completed (Can access server response and use it)
So when readystate equals 4 o'clock, it means that a full server response has been received, and then the function checks the status value of the HTTP server response. When the HTTP server responds with a value of 200, it indicates that the status is normal. This is the time to actually perform the actions that the client will perform.
There are two ways to read data that comes back from the server:
1, Http_request.responsetext: Return the response of the server as a text string
2. Http_request.responsexml: Return response in XmlDocument object mode

v. Ajax flaws and deficiencies
1, may damage the browser back button normal behavior;
2, the use of dynamic page update makes it difficult for users to save a particular state to the Favorites folder;
3, Ajax no refresh overload, because the page changes do not refresh the overload so obvious, so it's easy to bring trouble to users-users are not sure whether the current data is new or have been updated; Existing solutions are: in the relevant location hints, data updates of the region design more obvious, the data updated to user prompts, etc.;
4, some handheld devices (such as mobile phones, PDAs, etc.) are not good enough to support Ajax.

VI. AJAX Tools

1, JQuery Open source JS framework, write less, do more;
2, asp.net ajax Extension Microsoft Ajax Toolbox;
3, ExtJS A from Yui extended out of the AJAX framework.