Ajax Technical Documentation

Ajax

First, the main reason to use Ajax

1, through the appropriate AJAX application to achieve a better user experience;

2, some of the previous server burden to the client, to facilitate the client idle processing capacity to deal with, reduce the burden of server and bandwidth, so as to save the ISP space and bandwidth rental costs .

Second, the reference

Ajax This concept of the earliest proposed by Jesse James Garrett that:

Ajax is the abbreviation for asynchronous JavaScript and XML . Ajax is not a new language or technology, it is actually a combination of several technologies in a certain way to play their role in the same collaboration, it includes:

Standardized rendering using XHTML and CSS;

Use DOM to implement dynamic display and interaction;

Data exchange and processing using XML and XSLT;

Using XMLHttpRequest for asynchronous data reading;

Finally, bind and process all data with JavaScript;

Ajax works by adding a middle tier between the user and the server , enabling the user to respond asynchronously to the server . Not all user requests are submitted to the server , such as data validation and processing, to the AJAX engine itself, only to determine the need to read new data from the server by the Ajax engine to the server submit the request .

Iii. Overview

Although Garrent lists 7 Ajax components, it is personally believed that the so-called Ajax core is JavaScript, XMLHttpRequest, and Dom, and that if the data format is XML, it can be added with XML (Ajax the data returned by the server can be in XML format or in other formats, such as text.

In the old way of interaction, the user triggers an HTTP request to the server , the server processes it and then returns a new HTHL page to the client, and every time the server processes a client-submitted request, the client is only idle. And even if it's just a little interaction, just getting a very simple piece of data from the server , you're going to have to return a full HTML page, and the user is wasting time and bandwidth each time to reread the entire page .

With Ajax, the user will quickly respond to a wait without a page overload (screen) from almost every operation it feels .

1, XMLHttpRequest

One of the biggest features of Ajax is the fact that you can transfer or read or write data to the server without refreshing the page (also known as no Refresh Update page), which is mainly thanks to the XMLHTTP component XMLHttpRequest Object . This can be sent to the desktop application only with the server data level Exchange, without each refresh the interface and do not have to each of the data processing work to the server to do, which is to reduce the server The burden has accelerated the response speed and shortened the user waiting time .

The first applications xmlhttp Microsoft, IE (IE5) by allowing developers to use XMLHTTP ActiveX components within a Web page to extend their functionality, developers can transfer data directly from the current Web page to the server or The server takes the data . This feature is important because it helps to reduce the pain of stateless connections, and it also eliminates the need to download redundant HTML, thereby increasing the speed of the process . the response of Mozilla (Mozilla1.0 above and above NetScape7) is to create its own inherited XML proxy class: The XMLHttpRequest class . Konqueror (and Safari v1.2, also a khtml based browser) also supports XMLHttpRequest objects, and opera also supports v7.6x+ objects in later versions of XMLHttpRequest . for most cases, XMLHttpRequest objects are similar to XMLHTTP components, and methods and properties are similar, except that a small subset of properties are not supported .

XMLHttpRequest Application:

Application of XMLHttpRequest object in JS

var xmlhttp = new XMLHttpRequest ();

Microsoft's XMLHTTP component in JS application

var xmlhttp = new ActiveXObject (microsoft.xmlhttp);

var xmlhttp = new ActiveXObject (msxml2.xmlhttp);

XMLHttpRequest Object method

/**

* 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 to 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 method

Method	Describe
Abort ()	Stop current request
getAllResponseHeaders ()	Return the complete headers as a string
getResponseHeader ("Headerlabel")	To ask a single header label as a string
Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]])	Set the target URL, method, and other parameters of pending requests
Send (content)	Send Request
setRequestHeader ("label", "value")	Set header and send along with request

XMLHttpRequest Object Properties

Property	Describe
onReadyStateChange	Event triggers for state changes
ReadyState	Object State (integer): 0 = not initialized 1 = in read 2 = Read 3 = in interaction 4 = Complete
ResponseText	The server process returns a text version of the data
Responsexml	The XML Document object that the server process returns the data as a compatible DOM
Status	Status code returned by the server , such as: 404 = "Found at end of file", 200 = "Success"
StatusText	Status text information returned by the server

2. JavaScript

JavaScript is a programming language that is used heavily in browsers, and he has been degraded to a bad language (he does use it rather boring) to be used to show off gadgets and pranks or tedious forms of verification . But the fact is that he is a real programming language, has its own standards and is widely supported in various browsers .

3, DOM

Document Object Model. A DOM is a set of APIs for use with HTML and XML files. it provides a structural representation of the file, allowing you to change the contents and visible objects . its essence is to build a bridge between Web pages and Script or program language . the properties, methods, and events that all Web developers can manipulate and create files are represented by objects (for example, the document represents the "file itself" image, the Table object represents the HTML table object, and so on). These objects can be used by most browsers in today's Script .

A Web page built with HTML or XHTML can also be viewed as a structured set of data that is blocked in the DOM (Document Object Model), which provides the support for reading and writing of the objects in the Web page .

4, XML

Extensible Markup Language (extensible Markup Language) has an open, extensible, self-describing language structure that has become the standard for data and document transmission on the Web . It is a language used to describe data structures, just like his name . he makes it easier to define some structured data, and he can exchange data with other applications .

5, comprehensive

The Ajax engine that

Jesse James Garrett refers to is actually a more complex JavaScript application that handles user requests, reads and writes

JavaScript Ajax engine reads the information and interactively rewrites the DOM, which enables the Web page to be seamlessly refactored, which is to change the page content after the page has been downloaded, which is the way we've been using JavaScript and DOM extensively , but to make the page really dynamic, not only to internal interaction, but also need to obtain data from the outside, in the past, we are to allow users to enter data and through the DOM to change the content of the page, but now, XMLHttpRequest, we can not overload the page to read and write data on the server to make the user's input to a minimum xml-based network traffic is not new, in fact, Flash and Java applets have a good performance, now this rich interaction is also available on the Web page, based on standardized and widely supported and technology, and do not need Plug-ins or download small programs

Ajax is a transformation of traditional Web applications previously generates HTML pages each time and returns to the client (browser) in most sites, at least 90% of many pages are the same, such as structure, format, header, footer, ad, and so on, but only a small part of the content, but each time server All the pages will be generated and returned to the client, which is a waste, whether for the user's time, bandwidth, CPU consumption, or for the high price of the ISP leased bandwidth and space for If you press a page, only a few K or dozens of k may not be noticeable, but like Sina to generate millions of pages a day large ISP, can be said to be a huge loss of and Ajax can be the middle tier of the client and to process client requests and send requests to side as needed , take what you use, take as much as you can, there will be no data redundancy and waste, reduce the total number of data downloads, and update the page without overloading the entire content, only update the part that needs to be updated, relative to the pure background processing and overloading of the way to shorten the user wait time, but also to minimize the waste of resources, Based on standardization and broad support and technology, and does not require plug-ins or download small programs, so Ajax for users and ISPs is a dual-surplus

Ajax makes the interface in the Web separate from the application (or the separation of data from the rendering), whereas in the past there was no clear boundary between the separation of data and presentation, which was beneficial to the Division of labor and the reduction of Web application errors caused by non-technical changes to the page. Improve efficiency, but also more applicable to the current publishing system The can also pass on some of the previous to the client, which facilitates the client's idle processing capacity to handle

Four, the application

The emergence of Ajax concept, opened the era of refreshing update page, and there is a substitute for traditional web development in the form (form) submitted to update the Web page trend, can be regarded as a milestone . But Ajax does not apply to all places, its scope is determined by its characteristics .

An example of an application is the AJAX application of cascading menus . our previous approach to cascading menus is this:

In order to avoid the overloaded pages that are caused by each operation on the menu, instead of using each call back to the background, all the data for the cascading menu is read out and written to the array, and then the rendering of the subset item is controlled by JavaScript according to the user's action, which solves the response speed, Do not overload the page and avoid frequent requests to the server , but if the user does not operate the menu or only part of the menu, the read data will become redundant data and waste the user's resources, especially in the menu structure complex, In the case of large amount of data (such as the menu has many levels, each level of food and hundreds of items), this disadvantage is more prominent .

If Ajax is applied in this case, the results will be improved:

When we initialize the page, we only read all the data from its first level and show that when a user operates one of the first-level menus, all data for the level Two submenu to which the current level of the project belongs is requested by Ajax to the back desk, and if you continue to request an item from the level two menu that is already rendered, And then to request all the data of all level three menus for the two-level menu item that you are working on, and so on ... In this way, take what you use, take as much as you can, there will be no data redundancy and waste, reduce the total number of data downloads, and update the page without overloading the entire content, only update the part that needs to be updated, relative to the background processing and overloading of the way to shorten the user wait time, but also to minimize the waste of resources .

In addition, Ajax can also implement data aggregation because of its ability to invoke external data, such as the beta version of the online RSS reader that Microsoft has just released on March 15, and the benefits of open data and the development of some of its own applications, For example, using Amazon's data for some novel book Search Applications .

In short, Ajax is suitable for Web applications that have more interaction, read data frequently, and classify data in a good way .

V. Advantages of Ajax

1, reduce the burden on the server . because the fundamental idea of Ajax is "on-demand data", it is most likely to reduce the burden on the server of redundant requests and echoes;

2, no Refresh update page, reduce user actual and psychological waiting time;

First of all, the "on-demand data" model reduces the actual amount of data read, playing a very figurative analogy, if the overloaded way from one end to the original point to the other end of the words, then Ajax is to a point of origin to reach another end point;

Second, even if you want to read the larger data, and do not have the same white screen as reload, because Ajax is sent with the XMLHTTP request to get the server response data, without reload the entire page in the case of using JavaScript Operation Dom Final update page, So in the process of reading the data, the user is not faced with a white screen, but the original page state (or can add a loading hint box to let the user understand the state of the data read), only after receiving all the data to update the corresponding part of the content, and this update is instantaneous, users can hardly feel . in short, users are very sensitive, they can feel your thoughtfulness to them, although not likely immediate results, but in the user's mind a little bit of accumulation of their dependence on the site .

3, a better user experience;

4, can also put some of the previous server burden of work to the client, to facilitate the client idle processing capacity to deal with, reduce the burden of server and bandwidth, save space and bandwidth rental costs;

5, Ajax because it can call external data;

6, based on standardized and widely supported and technology, and do not need Plug-ins or download small programs;

7, Ajax makes the Web interface and application separation (also can be said to be separated from the data and presentation);

8, for users and ISPs are double surplus .

Vi. Problems with Ajax

1, some handheld devices (such as mobile phones, PDAs, etc.) are not good enough to support Ajax;

2, with JavaScript Ajax engine, JavaScript compatibility and debug is a headache;

3, Ajax no refresh overload, because the page changes do not refresh the overload so obvious, so it is easy to bring trouble to users-users are not clear whether the current data is new or have been updated; the existing solutions are: in the relevant location hints, data updates of the area design more obvious, the data updated to user prompts, etc.;

4, the streaming media support no flash, Java applet good;

Vii. concluding remarks

Better AJAX applications require more client-side development and thinking about the current Web application concept, and a good user experience comes from the idea of thinking for all users, not just some kind of technology .

Eight, DEMO Ajax Picture Browser demo:http://www.dragonson.com/pic/

Ix. Contact method of the author

Msn:waymangood@hotmail.com oicq:458620

E-mail:amourguo@gmail.com Website: http://www.DragonSon.com