One of the complete solutions of Ajax technology

Ajax is called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). It is a Web page development technology used to create interactive web applications. It organically includes the following technologies:

Ajax (Asynchronous JavaScript + XML) Definition: representation based on the Web Standard (Standards-based presentation) XHTML + CSS; Dynamic Display and Interaction Using the DOM (Document Object Model; use XML and XSLT for data exchange and related operations; Use XMLHttpRequest for asynchronous data query and retrieval; use JavaScript to bind everything together.

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 "derived/synthesized" (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. However, opera does not support XSL format objects or XSLT.

Core of Ajax technology

The core of AJAX is JavaScript, XMLHttpRequest, and Dom. If the data format is XML, XML can be added. (The data returned by Ajax from the server can be XML, it can also be text or other formats ).

In the old interaction mode, the user triggers an HTTP request to the server. After the server processes the request, it returns a new hthl page to the client, each time the server processes a request submitted by the client, the client can only wait idle, and even if it is only a small interaction, it only needs to get a simple data from the server, you must return a complete HTML page, and each time you have to waste time and bandwidth to re-read the entire page.

After Ajax is used, users feel that almost all operations will quickly respond to the waiting without page overloading (white screen.

1. XMLHttpRequest

One of the biggest features of AJAX is that data can be transmitted to or read/written to the server without refreshing the page. This feature is mainly due to the XMLHTTPRequest object of the XMLHTTP component. In this way, the desktop application can only exchange data with the server, without refreshing the interface every time or submitting data processing to the server, in this way, the server load is reduced, the response speed is accelerated, and the user waiting time is shortened.

Microsoft was the first to apply XMLHTTP. IE (ie5 or above) allowed developers to use the XMLHTTP ActiveX component to expand their functions on the web page, developers can directly transfer data to the server or retrieve data from the server without having to navigate the current web page. This function is very important because it helps reduce the pain of stateless connections. It can also eliminate the need to download redundant HTML, thus improving the process speed. Mozilla (mozilla1.0 or later and netscape7 or later) responds by creating its own inherited XML proxy class: XMLHttpRequest class. Konqueror (similar to Safari v1.2 and khtml-based browsers) also supports XMLHttpRequest objects, while opera will also support XMLHttpRequest objects in Versions later than v7.6x +. In most cases, the XMLHTTPRequest object is similar to the XMLHTTP component, and the methods and attributes are similar, but a small part of the attributes are not supported.

2. Javascript

Javascript is a programming language that is widely used in browsers. He has been deprecated as a bad language (he is really boring ), it is often used for show-off gadgets, pranks, or monotonous form 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. Dom is a set of APIS for HTML and XML files. It provides the structure of the file, allowing you to change the content and visible objects. In essence, it is a bridge between web pages and scripts or programming languages. All the attributes, methods, and events that web developers can operate and create files are displayed as objects. For example, document represents the object, table objects represent HTML table objects ). These objects can be used as scripts by most browsers today.

A webpage built with HTML or XHTML can also be seen as a group of structured data, which is blocked in the DOM (Document Object Model, dom supports reading and writing of objects in a webpage.

4. xml

The Extensible Markup Language (Extensible Markup Language) has an open, scalable, and self-descriptive language structure that has become the standard for online data and document transmission. It is a language used to describe the data structure, just like its name. He makes it easier to define some structured data and can exchange data with other applications.

5. Comprehensive

The Ajax engine mentioned by Jesse James Garret is actually a complicated JavaScript Application that processes user requests, reads and writes servers, and changes Dom content.

The Ajax engine of JavaScript reads information and interactively overwrites the Dom, which enables the webpage to be modularized and restructured, that is, after the page has been downloaded, the page content is changed, this is a method that we have been using JavaScript and Dom extensively. However, to make webpages truly dynamic, not only internal interaction, but also external data needs to be obtained. In the past, we allow users to input data and Change Webpage content through DOM. But now, XMLHttpRequest allows us to read and write data on the server without reloading the page, minimize user input. XML-based network communication is not a new thing. In fact, flash and Java Applet both have a good performance. Now this rich interaction is available on the web page, it is based on standardized and widely supported technologies, and does not require plug-ins or downloading applets.

Ajax is a transformation of traditional Web applications. Previously, the server generated HTML pages each time and returned them to the client (browser ). In most websites, at least 90% of the pages are the same, such as the structure, format, header, footer, and advertisement. The difference is only a small part of the content, but every time the server generates all the pages and returns them to the client, this is an invisible waste, whether it is for the user's time, bandwidth, CPU consumption, for ISP bandwidth and space rented at high prices. If you calculate by one page, only a few K or dozens of K may be inconspicuous, but for example, a large ISP that generates millions of pages every day in Sina, it can be said that the loss is huge. AJAX can process client requests as the middle layer of the client and server, and send requests to the server as needed, there will be no data redundancy or waste, reducing the total amount of data downloads. In addition, you do not need to reload all the content when updating the page, just update the part that needs to be updated, compared with the pure background processing and reload method, this method shortens the user wait time and minimizes the waste of resources. Based on standardized and widely supported technologies, there is no need for plug-ins or downloading small programs, so Ajax is double-profit for users and ISPs.

Ajax separates web interfaces from applications (data and presentation). In the past, there were no clear boundaries between the two. Data and presentation were separated, it is conducive to the division of labor and cooperation, reduces web application errors caused by non-technical staff modification, improves efficiency, and is more suitable for the current release system. You can also transfer the previous server workload to the client, which facilitates the idle processing capability of the client.

Iv. Application

The emergence of Ajax concepts opens the prelude to the non-refresh and Update page era. It is a milestone to replace the trend of updating web pages by submitting forms in traditional web development. However, Ajax is not applicable in all places, and its applicability is determined by its features.

An example of an application is an Ajax application on cascading menus. We previously processed cascading menus as follows:

To avoid page overloading caused by each menu operation, instead of calling the background every time, all the data in the cascading menu is read at one time and written into the array, then, you can use JavaScript to control the presentation of its subset projects based on your operations. This solves the problem of operation response speed, no page overloading, and frequent requests sent to the server, however, if you do not operate the menu or only operate a part of the menu, a part of the read data will become redundant data and waste your resources, especially when the menu structure is complex and the data volume is large (for example, the menu has many levels and each level of food has hundreds of projects), this disadvantage is even more prominent.

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

On the initialization page, we only read and display all the data of the first level, ajax is used to request all data in the level-2 sub-menu of the current level-1 project to the background. If you continue to request an item in the level-2 menu that has already been displayed, then, request all data of all level-3 menus corresponding to the level-2 menu items to be operated, and so on ...... In this way, there will be no data redundancy and waste, reducing the total amount of data downloads, and you do not need to reload all content when updating the page, only the part to be updated can be updated. Compared with the background processing and reload method, the user wait time is shortened and the resource waste is minimized.

In addition, AJAX can call external data or aggregate data (authorization required), such as the beta version of online RSS reader launched by Microsoft in March 15; it also facilitates some open data and develops some applications, such as some novel book search applications using Amazon data.

In short, Ajax is suitable for Web applications with high interactions, frequent data reading, and good data classification.