1, the main reason for using Ajax,
[b]1, to achieve a better user experience through appropriate Ajax applications; [/b]
[b]2, passing some previous server burdens on the client to handle the client's idle processing ability to ease Server and bandwidth burden, so as to achieve the purpose of saving ISP space and bandwidth rental cost. [/b]
two, the earliest sponsor of the concept of
[b]Ajax, [url=http://www.adaptivepath.com/publications/essays/archives/000385.php:6nlygnvj]Jesse James Garrett[/url:6nlygnvj], that [/b]
Ajax is the abbreviation of Asynchronous JavaScript and XML.
Ajax is not a new language or technology. It is actually a number of technologies that are combined in a certain way in a shared collaboration. It includes
using XHTML and CSS standardized presentation;
uses DOM to implement dynamic display and interaction;
uses XML and XSLT for data intersection. Exchange and processing;
uses XMLHttpRequest to read asynchronous data;
ends with JavaScript to bind and process all data;
Ajax is equivalent to adding an intermediate layer between the user and the server and asynchronously using the user's operation and the server response. Not all user requests are submitted to the server, such as data validation and data processing to the Ajax engine itself, and only when it is determined that the new data needs to be read from the server is then replaced by the Ajax engine to submit the request to the server.
Figure 2-1
figure 2-2
three, overview
although Garrent lists 7 Ajax components, but individuals believe that the core of the so-called Ajax is only Jav. AScript, XMLHTTPRequest, and DOM, if the data format is XML, can be added to the XML item (the data returned from the server from the Ajax can be a XML format, or the other format of the text).
in the old interaction, the user triggers a HTTP request to the server, the server handles it and then returns a new HTHL page to the client. Each time the server handles the requests submitted by the client, the client can only wait for the client, and even only a very small interaction, only from the server side. A simple data needs to return to a complete HTML page, and users waste time and bandwidth each time to re read the entire page.
and using Ajax, almost all the operations of the user will soon respond to the lack of page overload (Bai Ping) waiting. One of the biggest features of
[b]1, XMLHTTPRequest[/b]
Ajax is that there is no need to refresh the page to transmit or read and write data to the server (also called no refresh update page), which is mainly due to the XMLHTTP component XMLHTTPRequest object. In this way, you can exchange the data level with the server only with the server, and do not have to refresh the interface every time to submit the data processing to the server, which reduces the server's burden and speeds up the response speed and shortens the waiting time of the user.
the earliest use of XMLHTTP is Microsoft, and IE (IE5) allows developers to extend their capabilities by using XMLHTTP ActiveX components within Web pages, and developers can transfer data directly to the server or take data from the server without navigation from the current Web page. This function is important because it helps reduce the pain of a stateless connection, and it can also exclude the need for downloading redundant HTML, thus improving the speed of the process. The response of Mozilla (above Mozilla1.0 and NetScape7) is to create its own inheritance XML proxy class: XMLHttpRequest class. Konqueror (and Safari v1.2, which is also a browser based on KHTML) also supports XMLHttpRequest objects, and Opera will support XMLHttpRequest objects in their later versions of v7.6x. For most cases, XMLHttpRequest objects are very similar to XMLHTTP components, and methods and properties are similar, except for a small number of attributes. The application of the
XMLHttpRequest: the application of the
XMLHttpRequest object in the JS =
var xmlhttp = new XMLHttpRequest ();
the application of the XMLHTTP component in the Microsoft; Method
/**
* Cross-browser XMLHttpRequest instantiation.
*/
if (typeof XMLHttpRequest = =.Quot; undefined.quot;) The
[b] method [/b]
[b] describes [/b]
abort ()
stop the current request
getAllResponseHeaders ()
as a string back to the complete headers
getResponseHeader. AsyncFlag[,.Quot; userName.quot; [,.Quot; password.quot;]]] the target URL, method, and other parameters
send (content)
send the request
to set up and send the object attribute together with the request. The R />[b] attribute [/b]
[b] describes the [/b]
onreadystatechange
event trigger
readyState
object state (integer):
0 = no initialization
responseXML
server process returns the status code returned by the
status
server of the compatible DOM's XML document object, such as: 404 =.Quot; at the end of the file, the.Quot; the 200 =.quot; the successful.Quot; the States returned by the
statusText
server. JavaScript is a programming language that is widely used in browsers, and he has been belittled as a bad language (he is really boring in use), which is often used as a display of gadgets and pranks or monotonous form validation. But the fact is that he is a real programming language with his own standards and is widely supported in various browsers.
[b]3, DOM[/b]
Document Object Model.
DOM is a set of API for HTML and XML files. It provides a structural representation of the document so that you can change the contents and visible objects. Its essence is to establish a bridge between web pages and Script or program languages.
all WEB developers can operate and build the properties, methods, and events of the file to be displayed by objects (for example, document represents "the file itself" the 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 seen as a set of structured data, which is sealed in DOM (Document Object Model), which provides support for the reading and writing of the various objects in the web.
[b]4, XML[/b]
extensible markup language (Extensible Markup Language) has an open, extensible, self describing language structure, which has become the standard for data and document transmission on the Internet. It is a language used to describe data structure, just like his name. He makes the definition of some structured data easier and can exchange data between him and other applications. The Ajax engine mentioned in
[b]5, integrated [/b]
Jesse James Garrett is actually a more complex JavaScript application to handle user requests, read and write servers, and change the content of DOM.
JavaScript's Ajax engine reads information and interactively rewrites DOM, which makes web pages seamless refactoring, that is, to change page content after the page has been downloaded. This is the way we have been widely used through JavaScript and DOM, but to make the web really dynamic, not only internal. It also needs to get data from the outside. In the past, we were allowing users to input data and change the content of the web page through DOM, but now, XMLHTTPRequest, let us read and write the data on the server without reloading the page, and the user's input is the least.
XML based network communication is not a new thing. In fact, both FLASH and JAVA Applet have a good performance. Now this rich interaction is also available on a web page, based on standardized and widely supported and technical, and does not require plug-ins or downloads.
Ajax is a transformation of traditional WEB applications. In the past, the server generated HTML pages every time and returned to the client (browser). In most web sites, at least 90% of many pages are the same, such as structure, format, page header, page tail, advertising, etc., which are only a small part of the content, but each time the server generates all the pages and returns to the client, it is a waste of time, whether it is the time for the user. Bandwidth, CPU consumption, or ISP's high price of rental bandwidth and space. If one page is calculated, only a few K or dozens of K may not be the same, but like a large ISP that generates millions of pages per day by SINA, it can be said to be a huge loss. And AJAX can be the middle layer of the client and server to handle the client's request and send the request to the server, what to take and how much to use on the server side. There will be no redundancy and waste of data, the total amount of data downloading is reduced, and the full content is not Reloaded when the page is updated, only Updating that part of the update needs to be updated, shortening the user waiting time relative to the pure background processing and overloading, reducing the waste to the resource, based on standardized and widely supported and technical, and without the need for plug-ins or downloading small programs, so Ajax is double to both the user and the ISP.
Ajax separations and applications in WEB (or data and presentation), and there is no clear boundary between the previous two. Separation of data and presentation is beneficial to work and cooperation, to reduce the WEB application sequence error caused by the modification of the page, to improve the efficiency, and to be more suitable. It is used for the present publishing system. It can also transfer some previous server workload to the client, which is conducive to handling the idle processing ability of the client.
four, the emergence of the application of
Ajax concept, uncovered the prelude to the era of no refresh update page, and the trend of replacing the web page with form (form) submission in the traditional web development can be a milestone. But Ajax is not applicable to all places, and its application is determined by its characteristics.
an example of application is Ajax application on cascading menu.
our previous handling of cascading menus is this:
to avoid the overloaded page that is caused by the operation of the menu every time, instead of using the backstage every time, it reads all the data of the cascaded menu and writes the array at one time, and then uses JavaScript according to the user's operation. To control the presentation of its subset project, which solves the problem of operating response speed, not overloading the page, and avoiding frequent requests to the server, but if the user does not operate on the menu or operates only part of the menu, a portion of the read data will become redundant. According to the waste of the user's resources, especially in the case of complex menu structure and large amount of data, such as many levels of menus and hundreds of items in each level, the abuse is more prominent.
if Ajax is used in this case, the results will change:
we read only all the data of its first level when initializing the page and show that, when the user operates one of the first level menus, all the data of the two level submenu of the current level item will be requested through the Ajax to the background, such as When the fruit continues to request one of the two level menus that has been presented, it requests all the data of all three level menus corresponding to the two level menu item to the back, and so on... So, what to take, how much to use, will not have data redundancy and waste, reduce the total amount of data downloading, and update the page do not have to overload the full content, only update the need to update the part, relative to the background processing and heavy load shortening the user waiting time, but also the capital. The waste of the source has been reduced to a minimum.
, in addition, Ajax can also make data aggregation functions, such as Microsoft's online RSS reader BETA version that has just been released in March 15th, as it can invoke external data. It also helps open data and develop some of its own applications, such as Amazon data. Some new book search applications.
in short, Ajax is suitable for WEB applications that interact more frequently, read data frequently and classify data well.
five, Ajax's advantage
[b]1, lighten the burden of the server. Because the basic idea of Ajax is to "take data on demand", it is most likely to reduce the burden of redundant requests and ringing to the server; [/b]
[b]2, no refresh update page, reduce user's actual and psychological wait time; [/b]
first, "according to the need to take the data" mode to reduce the data real If the way of overloading is to return from one point to the original and then to the other end, the Ajax is to reach another end with one point as the base point;
[/b]
graph 5-1
Figure 5-2 next, even if you want to read a large number of data, you don't have to have a white screen like RELOAD, because Ajax is using XMLHTTP to send the request to the server response data, using Javascript without reloading the entire page. DOM finally updates the page, so in the process of reading the data, the user is not facing the white screen, but the original page status (or can add a LOADING prompt box to let the user understand the state of the data read), only to update the content of the corresponding part only when all the data is received, and this update is also At the moment, the user can hardly feel it. In a word, users are very sensitive, they can feel your considerate to them, although it is not likely to have a quick effect, but it will accumulate their dependence on the web site by bit in the user's heart.
[b]3, better user experience; [/b]
[b]4, can also transfer some previous server burdens to the client, benefit the client's idle processing ability to handle, reduce the burden of the server and bandwidth, save space and bandwidth rent costs; [/b]< br / > [b]5, Ajax because it can Call external data; [/b]
[b]6, standardized and widely supported and technical, and do not require plug-ins or downloading small programs; [/b]
[b]7, Ajax separate the interface from the application in WEB (and can also be separated from the data); [/b]
[b]8, for users and ISP, it is double. . [/b]
six, Ajax issues
1, some handheld devices (such as mobile phones, PDA, etc.) are now not well supported by Ajax;
2, Ajax engines made with JavaScript, JavaScript compatibility and DeBug are all headaches;
3, Ajax no refresh reload, because page changes are not Refreshing overloading is so obvious that it is easy for users - the user is not sure whether the current data is new or updated; existing solutions are: the related location prompts, the data update area design is more obvious, the data updates to the user, etc.;
4, the support of the media No FLASH, Java Applet is good;
seven,
better Ajax application requires more client development, thinking about the current WEB application concept, and a good user experience, derived from ideas for all users, not simply a kind of technology.
eight, DEMO
Ajax picture browser DEMO:
[url=http://www.dragonson.com/pic/: 6nlygnvj]http://www.DragonSon.com/pic/[/url:6nlygnvj]
nine, contact mode
MSN: E-Mail: [url=mailto:amourguo@gmail.com]amourguo@gmail.com[/url]
Web site: [url=http://www.dragonson.com/: 6nlygnvj]http://www.DragonSon.com[/url:6nlygnvj]