First, the main reason for using Ajax

1, through the appropriate Ajax applications to achieve a better user experience;

2, some of the previous shift work burden on the server to the client, which will help the client idle processing power to handle, reducing the burden on the server and bandwidth, so as to achieve savings ISP space and bandwidth leasing costs.

Second, the reference to the earliest proponents of this concept Ajax Jesse James Garrett said:

Ajax is the acronym for Asynchronous JavaScript and XML.

Ajax is not a new language or technology, it is actually several techniques combined in a certain way with a total of collaboration in their respective roles, which includes

Using XHTML and CSS standardized presentation;

Using DOM dynamic display and interaction;

Using XML and XSLT for data exchange and processing;

Using XMLHttpRequest for asynchronous data reading;

Finally with JavaScript binding and processing of all data;

Ajax works is equivalent between the user and the server added - a middle layer, allowing users to operate with the server response asynchronized. Not all user requests are submitted to the server, like - some data validation and data processing and so on to the Ajax engine to do it themselves, need only to determine when new data is read from the server and then by the Ajax engine behalf submit a request to the server.

Three, an overview

Although the list of seven Ajax Garrent composition techniques, but personally think that the so-called Ajax its core only JavaScript, XMLHTTPRequest and DOM, if the data format to XML, then it can also be coupled with an XML (Ajax from the server side The data can be returned in XML format, it can be a text, and other formats).

In the old interactive mode, the user triggers an HTTP request to the server, the server processes it and then returns a new HTHL page to the client, server processing whenever a request submitted by the client, the client can only idle waiting and even if only a small one interaction, just to get from the server side of a very simple data, must return a complete HTML page, and the user every time a waste of time and bandwidth to re-read the entire page.

The use of Ajax after the user from feeling almost all operations will soon respond without page reload (black and white) of waiting.

1, XMLHTTPRequest

One of the biggest feature of Ajax without refreshing the page is able to read and write data to the server transmitting or (also known as the update without refreshing the page), this feature is mainly due to the XMLHTTP component XMLHTTPRequest object. So that you can then send to desktop applications only with the server for data exchange level, rather than each time they do not refresh the screen each time the data is submitted to the server process to do the work, so that they reduce the burden on the server to speed up the response speed, shorten the waiting time for users.

The first application is Microsoft XMLHTTP, IE (IE5 above) by allowing developers to use the XMLHTTP ActiveX Web pages inside components expand their capabilities, developers can not from the current Web page navigation and direct transmission of data to the server or from the server to take data. This feature is very important because it helps to reduce the pain of stateless connections, it can eliminate the need to download the HTML redundancy, thereby enhancing the process speed. Mozilla (Mozilla1.0 above and NetScape7 above) responded by creating its own proxy class inherits XML:

XMLHttpRequest class. Konqueror (and Safari v1.2, is also KHTML-based browsers) also supports the XMLHttpRequest object, and Opera will also be in its future versions v7.6x + support XMLHttpRequest object. For most cases, XMLHttpRequest object and the XMLHTTP component is very similar to the methods and properties are similar, but there is a small part of property is not supported.

XMLHttpRequest applications:

XMLHttpRequest object in JS application

var xmlhttp = new XMLHttpRequest ();

Microsoft XMLHTTP component applications in JS

var xmlhttp = new ActiveXObject (Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject (Msxml2.XMLHTTP);

XMLHttpRequest object methods


/ **
* Cross-browser XMLHttpRequest instantiation.
* /

if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i = 0; i <msxmls.length; i + +) {
try {
return new ActiveXObject (msxmls [i] + '. XMLHTTP')
} Catch (e) {}
throw new Error ("No XML component installed!")
function createXMLHttpRequest () {
try {
/ / Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest ();
/ / Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject (getXMLPrefix () + ". XmlHttp");
catch (ex) {}
return false;
XMLHttpRequest object methods
Method Description
abort () Stops the current request
getAllResponseHeaders () As String back to ask the full headers
getResponseHeader ("headerLabel") as a string back to ask a single header label
open ("method", "URL" [, asyncFlag [, "userName" [, "password"]]]) Set goals pending request URL, method, and other parameters
send (content) sends a request
setRequestHeader ("label", "value")
Set header and sent along with the request

XMLHttpRequest object properties
Property Description
onreadystatechange event trigger state changes
readyState Object status (integer):
0 = not initialized
1 = Read in
2 = read
3 = interaction
4 = complete
responseText server processes the data returned text version
server processes the data returned responseXML DOM-compatible XML document object
status status code returned by the server, such as: 404 = "end of file found" 200 = "success"
Server returns status text message

2, JavaScript

JavaScript is a large-scale use in the browser programming language, he had been relegated to a bad language (he did in the use of more boring), in order to make the often used to show off some of the gadgets and prank or monotonous trivial form validation. But the fact is that he was a real programming language, with their own standards and various browsers is widely supported.

3, DOM

Document Object Model.

The DOM is to use HTML and XML documents a set of API. It provides a structural representation of the document, so you can change the content and visible. Its essence is to create web pages with Script programming language or a bridge.

All WEB-developers and the establishment of operational file attributes, methods, and events to show an object (for example, document on behalf of "the document itself" This object, table object represents an HTML form objects, etc.). These objects can be in most of today's browsers Script to access.

One constructed using HTML or XHTML pages can also be viewed as a set of structured data, which are sealed in DOM (Document Object Model) in, DOM provides a web page to read and write support for each object.

4, XML

Extensible Markup Language (Extensible Markup Language) has an open, scalable, and can be self-describing language structure, it has become an online data and document transmission standards. It is used to describe the data structure of a language, just as his name. He makes some structured data definitions easier, and can he and other applications to exchange data.

5, integrated

Jesse James Garrett mentioned Ajax engine is actually a more complex JavaScript applications to handle user requests, read and write the server and change the DOM content.

JavaScript, Ajax engine reads the information and interactive rewriting DOM, which makes seamless web of reconstruction, that is, after the page has finished downloading to change the page content, which is we have been through extensive use of JavaScript and the DOM in the method, but to make it truly dynamic web pages, not only to the internal interaction, you also need to get data from the outside, in the past, we allow users to enter data and to change web content via the DOM, but now, XMLHTTPRequest, allows us to In the case without reloading the page to read and write data on the server, so that the user's input to a minimum.

XML-based network communication is also not a new thing, in fact, FLASH and JAVA Applet has a good performance, and now this rich interaction on the web is also available, based on standardized and widely support and technology, and does not require plug-ins or Download applet.

Ajax is a traditional WEB application changes. Every time before the server generates the HTML page and return to the client (browser). In most sites, many pages are the same, at least 90%, such as: the structure, format, page headers, footers, advertising, etc., the difference is only a small part of the content, but each time the server will generate all the Page then returned to the client, which is a kind of invisible waste, whether it is for the user's time, bandwidth, CPU consumption, or for the ISP's high bandwidth and space is rented. If you press one to count, only a few tens of K K or may not seem like much, but like SINA day to generate several million pages of large ISP, it can be said to be a huge loss. The AJAX lets the client and middle-tier server to handle the client's request, and if necessary sends a request to the server, from what to what, how and how much to take, there will be no data redundancy and waste , reducing the amount of data download, and update the page do not overload update only that part can be updated with respect to the pure background process and the way overloaded shortening waiting time for users, but also the waste of resources to a minimum, based on standardized and widely support and technology, and does not require plug-ins or downloads a small program, so Ajax for the user and the ISP is a win-win.

Ajax in the WEB interface and application separation (also can be said that the data and presentation separation), while in the past there is no clear boundary between the two, the separation of data and presentation separation is beneficial division of labor, reduce non-technical personnel of the page changes caused by WEB application errors, improve efficiency, and more applicable to the present distribution system. You can also put some of the previous shift work burden on the server to the client, which will help the client idle processing power to handle.

Fourth, the application

Ajax philosophy appeared, opened a page without refreshing update prelude to the era, and instead of the traditional web development using form (form) update the web page submission trends, can be regarded as a milestone. But Ajax is not applicable to all places, its scope is determined by the characteristics of its decision.

For examples of the application is on the cascading menu's Ajax applications.

Our previous treatment for cascading menu like this:

In order to avoid the operation of each of the menu due to reload the page, do not use each call back way, but once the cascading menu read out all the data and writes the array, and then according to the user's actions with JavaScript to control it presents a subset of the project, although this resolved operation speed of response, without reloading the page and to avoid sending the request to the server frequent problem, but if the user does not operate the menu or just a part of the menu to operate it, That part of the data read will become redundant data and wasting the user's resources, especially in the menu structure is complex, large amount of data in the case (such as menus have a lot of levels, each dish have hundreds of projects ), this disadvantage is even more prominent.

If Ajax application in this case, the result will be some improvement:

In the initial page when we read out its first-class all the data and display in a menu where a user when the current through an Ajax request to the back of the two sub-menu item belongs to all of the data, If we continue to request has been presented in a secondary menu when the request again later operating two menu items corresponding to all of the data of all three menus, and so on ...... so, from what to what, with the how much to take, there will be no data redundancy and waste, reducing the amount of data downloaded, but do not overload them update the page content to update only need to update that part can be, relative to the background processing and override The method shortens the waiting time for users, but also to minimize waste of resources.

In addition, Ajax because you can invoke external data, but also can achieve data aggregation functions (of course have the appropriate authorization), such as Microsoft has just released in March 15 online RSS reader BETA version; also facilitate a number of open data, development own some applications, such as using Amazon's data for some of the novel Book Search application.

In short, Ajax applies to interact more frequently read data, data classification good WEB application.

Five, Ajax's strengths

1, reduce the burden on the server. Ajax because the fundamental concept of "demand data", so the maximum possible redundancy in reducing the shadow of the server request and response burden;

2, no Refresh Update, thus reducing the actual and psychological waiting time;

First, the "demand data" model to reduce the amount of data actually read, play a very vivid example, if the method is overloaded from a destination to another destination and then return to the origin, then Ajax is to one end anchored to another destination;


Figure 5-1


Figure 5-2

Second, even if the data to be read relatively large, they do not appear as black and white as RELOAD situation, because Ajax is used XMLHTTP to send a request to get the server response data without reloading the entire page in the case of DOM Javascript will eventually update the page, so the data is read, the user is not faced by black and white, but the original page state (or you can add an LOADING prompt box allows users to understand the state of the data read), only when All data received after the update the corresponding part of the content, and this update is also instantaneous, users hardly feel. Overall user is very sensitive, and they can feel your thoughtfulness for them, though unlikely immediate effect, but will in the user's mind a little bit of accumulation of their dependence on the website.

3, a better user experience;

4, you can put some of the previous shift work burden on the server to the client, which will help the client idle processing power to handle, reducing the burden on the server and bandwidth, saving space and bandwidth leasing costs;

5, Ajax can call the external data;

6, based on standardized and widely support and technology, and does not require plug-ins or downloads applets;

7, Ajax makes the WEB interface and application of separation (also can be said that the data and presentation separation);

8, for the user and the ISP is a win-win.

Six, Ajax problem

1, a number of handheld devices (such as mobile phones, PDA, etc.) is not yet well supported Ajax;

2, using JavaScript for the Ajax engine, JavaScript compatibility and DeBug are headache thing;

3, Ajax without refresh reload, because the change does not refresh reload the page so obvious, so easy to bring trouble to the user - the user data is not clear now is new or has been updated; existing solutions have : prompt in the relevant position data update area designed to be more obvious to the user data is updated tips, etc.;

4, support for streaming media without FLASH, Java Applet good;

VII Conclusion

Better Ajax applications that require more client development, and application of the concept of the current thinking of the WEB, and a good user experience, from the user to consider the idea of ​​everywhere, rather than simply a technology.

This concludes the body part