Ajax Technical Documentation (3)

Source: Internet
Author: User
Tags call back documentation end error handling html page interface require client
Ajax 5, integrated

The Ajax engine mentioned by Jesse James Garrett is actually a more complex JavaScript application that handles user requests, reads and writes to servers, and changes DOM content.

The JavaScript Ajax engine reads the information and interactively rewrites the DOM, which enables the web to be seamlessly refactored, which is the way that we've been using JavaScript and DOM to change the content of the page, which we've always used in a wide variety of ways, but to make the page truly dynamic, Not only to internal interaction, but also 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, so that the user's input to the minimum. Xml-based network communication is not new, in fact, both 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, the server generated the HTML page every time and returned it to the client (browser). In most sites, at least 90% of the pages are the same, for example: structure, format, header, footer, advertising, etc., the difference is only a small part of the content, but each server will generate all the pages and then return to the client, which is a waste of the invisible, whether for the user's time, bandwidth, CPU consumption , or to the bandwidth and space of the ISP's high-priced lease. If you click on a page, only a few K or dozens of k may be insignificant, but like Sina to generate millions of pages a day large ISP, can be said to be a huge loss. Ajax can be the middle tier for both the client and the server, to handle the client's request, and send the request to the server, as needed, what to take, how much to take, there will be no redundancy and waste of data, reduce the total amount of data download, and update the page without overloading the entire content, Just update the part that needs to be updated, compared to the pure background processing and overloading of the way to shorten the user latency, but also to minimize the waste of resources, based on standardized and widely supported and technology, and do not require plug-ins or download small programs, so Ajax for users and ISPs are dual-profit.

Ajax separates the interface from the application in the Web (or the separation of the data from the presentation), 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, increased efficiency, is also more applicable to the current release system. Can also put some of the previous server burden of work to the client, to facilitate the client idle processing capacity to deal with.

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 sending requests frequently to the server. However, if the user does not operate the menu or only a part of the menu, the read data will become redundant data and waste the user's resources, especially in the context of complex menu structure, the large amount of data (such as the menu has many levels , every level of food and hundreds of projects), this abuse 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 waiting 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;



Figure 5-1

Figure 5-2

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 almost 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 image 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

    • Ajax: A new way to build Web apps
    • Discussion on the error handling mechanism of AJAX (2)
    • Discussion on the error handling mechanism of AJAX (1)
    • First experience. NET Ajax Brushless New technology
    • A brief analysis of Ajax development Technology in Rails system (4)


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.