Internal implementation mechanism, principles, and practices of AJAX

I. What is Ajax?

Ajax is called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). Ajax is not a technology. It is actually several technologies, each of which has its own unique characteristics, combined into 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
Use JavaScript to operate dom (Document Object Model) for Dynamic Display and Interaction
Data exchange and related operations using XML and XSLT
Use XMLHTTPRequest object for asynchronous data exchange with the Web Server
Use JavaScript to bind everything together
Use soap to send method names and method parameters in XML format
Similar to DHTML or lamp, Ajax does not refer to a single technology, but organically utilizes a series of related technologies. In fact, some Ajax-based "derivative/Composite" technologies are emerging, such as "aflax ".

Ajax applications use Web browsers that support the above technologies as the operating platform. These browsers currently include: Mozilla, Firefox, Internet Explorer, opera, Konqueror, and safari for Mac OS. However, opera does not support XSL format objects or XSLT. (From: http://zh.wikipedia.org/zh-cn/AJAX)

Ii. Why is Ajax used?

We all know that after a user generates a request through a browser, the request uses the HTTP protocol to request resources from the server. If it is an image link, the request is an image resource, if a file link is used, a file resource is requested. In most cases, the entire webpage is requested, and the webpage requests specific resources based on its own HTML code, video, audio, and so on. With the development of websites, the number of users is increasing, and the pressure on servers is also increasing, which exposes a problem: when most users request resources, the new requested webpage, there are many similarities with the current webpage. However, because the request is for the entire web page, it will obtain all the resources from the server (of course, there are a lot of images, files and so on will be obtained from the client), which is a big waste.

To solve this problem, Ajax was born. Its main function is to obtain server resources through the XMLHTTPRequest object and partially refresh the page that the user is browsing, which greatly reduces the pressure on the server, because only the resources to be updated are obtained, the Data Interaction Between the browser and server is greatly reduced (about 5% of the original) compared with the resources on the entire page ), this greatly speeds up page loading.

 

Iii. Ajax Development History

This technology was originally developed by a Microsoft R & D team to allow clients to send HTTP requests but has not been widely used. Later, Google was widely used in its applications for asynchronous communication and interaction, such as Google discussion groups and Google Maps. The word Ajax was created by Ajax: A New Approach to Web applications, the rapid spread of this article raised people's awareness of the use of this technology, and then there was a crazy Ajax revolution.

 

Iv. Ajax practices

The main point of AJAX is the XMLHTTPRequest object. All implementations are also operated through the XMLHTTPRequest object. However, in today's browser war, the methods for creating XMLHttpRequest objects in different browsers are different. The IE browser uses activexobject, while other browsers use JavaScript built-in objects named XMLHttpRequest.

// 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 was a problem with the request. ');}}}

Explanation: first, create an XMLHTTPRequest object http_request. If window. XMLHttpRequest is supported, use new XMLHttpRequest () to create this object. This statement is applicable to Firefox, opera, and Safari browsers. If not, try to create XMLHttpRequest for the msxml2.xmlhttp component of Internet Explorer 6.0 +. If not, then try Microsoft. if the XMLHTTP component is still not supported, it indicates that the user's browser version is too low, prompting the user "your browser does not support Ajax ".

The onreadystatechange method of the XMLHTTPRequest object is used to process the response when the status changes.

The readystate status is:

0 request not initialized (before open)
1 request submitted, loading (before calling send)
2. After loading, the request has been sent (the content header can be obtained from the response)
3. In interaction, the request is being processed (some data is usually available in the response, but the server has not completed the response)
4. The request has been completed (you can access the server response and use it)
So when readystate is 4, it indicates that a complete server response has been received. Then, the function checks the status value of the HTTP server response. When the HTTP server response value is 200, the status is normal. In this case, the operations to be performed by the client are actually executed.

There are two ways to read the data returned from the server:

1. http_request.responsetext: return the server response in the form of a text string
2. http_request.responsexml: return the response as an xmldocument object

 

5. Ajax defects and deficiencies

1. it may damage the normal behavior of the browser's back button;
2. Using dynamic page updates makes it difficult for users to save a specific status to favorites;
3. No refreshing and reload refreshing of Ajax. Because the page changes are not as obvious as refreshing and reload, it is easy for users to be troubled-users do not know whether the current data is new or updated; existing solutions include: relevant location prompts, data update areas are designed to be obvious, and prompt users after data update;
4. Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet.

 

6. Ajax tools

1. jquery open-source JS framework, with fewer writes and more work done;
2. Microsoft Ajax toolkit for ASP. NET Ajax extension;
3. extjs is an Ajax framework extended from Yui.