Ajax definition and summary

Combine some documents to find out what is the magic of Ajax.

Ajax (Asynchronous JavaScript and XML) is a means of Web application development. It uses client scripts to exchange data with the Web server. Therefore, you can dynamically update Web pages without refreshing the complete page that interrupts interaction. With Ajax, you can create a richer and more dynamic Web application user interface, and its real-time and availability can even be close to the local desktop application.
　　
I. AJAX Definition
AJAX (Asynchronous JavaScript and XML) is actually a combination of a variety of technologies, including Javascript, XHTML and CSS, DOM, XML and XSTL, XMLHttpRequest. Where:
Use XHTML and CSS for standardized presentation, use DOM for Dynamic Display and interaction, use XML and XSTL for data exchange and processing, and use XMLHttpRequest object for Asynchronous Data Reading,
Use Javascript to bind and process all data.

Ii. status quo and problems to be solved
Traditional Web applications adopt synchronous interaction. In this case, the user first triggers a behavior or request Call request to the HTTP server. In turn, the server executes some tasks and then sends a request
The user returns an HTML page. This is a non-coherent user experience. When the server processes requests, users are waiting most of the time, and the screen content is blank. For example:
 
 
Since hypertext is used for Web transmission and presentation, we have adopted such a set of transmission methods. When the load is relatively small, this does not reflect what is wrong. However, when the load is large,
Response takes a long time, 1 minute, 2 minutes ...... In a few minutes, this kind of wait is intolerable. If the response time exceeds the limit, the server will tell you that the page is unavailable. In addition, sometimes,
I just want to change the data of a small part of the page. Why must I reload the whole page ?! When software design is becoming more user-friendly, such a bad user experience is similar to this principle.
. Why do users always have to wait for the server to fetch data? At least, we should reduce the user waiting time. Now, in addition to program design, encoding optimization, and server tuning, AJAX can also be used.
Iii. Why AJAX?
Unlike traditional Web applications, AJAX uses Asynchronous interaction. AJAX introduces an intermediate media between the user and the server, thus eliminating the disadvantages of processing-waiting-processing-waiting during network interaction.
Your browser loads the AJAX engine when executing tasks. The AJAX engine is written in JavaScript language and is usually hidden in a hidden framework. It compiles the user interface and interacts with the server.
The AJAX engine allows Asynchronous interaction between users and applications, independent of communication between users and network servers. Now, you can use Javascript to call the AJAX engine to generate an HTTP
User Actions, In-memory data editing, page navigation, and data validation can be performed by AJAX without re-loading the entire page.
 
 
With AJAX, you can make it visible to ISPs, developers, and end users:
· Reduce the burden on the server. The principle of AJAX is to "retrieve data on demand", which can minimize the burden on the server caused by redundant requests and responses.
· Without refreshing new pages, reducing users' psychological and actual waiting time. In particular, when you want to read a large amount of data, you do not need to use a white screen like Reload. AJAX uses
The XMLHTTP object sends a request and receives a server response. When the whole page is not re-loaded, Javascript is used to operate the DOM to update the page. Therefore, in the process of reading data, the user is not facing a white screen, but the original page content (you can also add a Loading prompt box to let the user know that the data is being read ), the content of the corresponding part is updated only after the data is received. This kind of update is instantly invisible to users.
· Brings a better user experience.
· The previous server workload can be transferred to the client, and the client's idle capabilities can be used to handle the workload, reduce the burden on servers and bandwidth, and save space and bandwidth rental costs.
· External data can be called.
· Based on standardized and widely supported technologies, you do not need to download plug-ins or small programs.
· Further promote the separation of page presentation and data.
4. Who is using AJAX?
In the case of application AJAX development, Google is definitely not a table rate. Orkut, Gmail, Google Groups, Google Maps, and Google Suggest all use this technology. Amazon's A9.com search engine also uses similar technologies.
Microsoft is also actively developing more sophisticated AJAX applications: it is about to launch the AJAX Tool named Atlas. Atlas functions go beyond AJAX itself, including debugging functions integrated with Visual Studio. In addition, the new ASP. NET control makes it easier to bind the client control with the server code. The Atlas client Script Framework also facilitates interaction with webpages and related projects. However, Visual Studio 2005 does not include this function.
Microsoft recently announced that the Atlas client script framework will contain the following content (for details, visit the Atlas plan website ):
· A scalable core framework with JavaScript features, such as lifecycle management, inheritance management, multi-point transfer processor, and interface management.
· A basic class library for common functions, including rich string processing, timers, and running tasks.
· A user interface framework that attaches dynamic behaviors to HTML.
· A group of network stacks used to simplify server connectivity and network access.
· A rich set of user interface development controls, such as automatically completed text boxes, animations, and drag-and-drop.
· Browser compatibility level for handling differences in browser script behavior.
Typically, Microsoft applies AJAX technology to MSN Space. Many people have always been surprised by the MS Space service. When a comment is submitted, the browser will pause temporarily and display the comments I submitted without refreshing the content. This is the effect of applying AJAX. Imagine that it would be very troublesome to refresh the entire page if you add a comment.
Currently, the most common application of AJAX is GIS-Map. Regional search in GIS emphasizes fast response, and AJAX features exactly match this requirement.
5. Use AJAX to improve your design
Although AJAX can be used to update page content without any need, it is mainly used in Web applications with a large number of interactions, frequent data reading, and good data classification. Now let's take two examples to see how to use AJAX to improve your design.

Example 1: Data Verification
When entering the form content, we usually need to ensure the uniqueness of the data. Therefore, the "unique verification" button is often provided on the page, allowing users to click to open a small verification window; or wait for the form to be submitted to the server, after being determined by the server, the server returns the corresponding verification information. The former is window. open operations are resource-consuming, usually by window. showModalDialog is replaced by showModalDialog. Even in this case, a dialog box is displayed. The latter submits the entire page to the server and the server determines the verification. This process takes a long time and increases the burden on the server. With AJAX, this verification request can be sent by the XMLHttpRequest object. A new window does not need to be popped up or the entire page needs to be submitted to the server, which quickly does not burden the server. Example 2: On-Demand Data Acquisition-cascade menu
Previously, to avoid page overloading caused by each menu operation, instead of calling the background every time, all the data in the cascading menu was 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.
Now with Ajax, when initializing the page, we only read all the data of its first level and display it. When one of the user operation level menus, 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.
Example 3: Read external data
AJAX can call external data. Therefore, it can perform secondary processing on some developed data such as XML documents and RSS documents to achieve data integration or application development. 6. Ajax Defects
Ajax is not a perfect technology. When Ajax is used, some of its defects have to be weighed:
· Ajax relies heavily on JavaScript and Ajax engines, depending on browser support. Ie5.0 and later versions, mozilla1.0, netscape7 and later versions are supported. Although Mozilla also supports Ajax, XMLHttpRequest is provided in different ways. Therefore, Ajax programs must test the compatibility of various browsers.
· Ajax does not refresh the entire page when updating the page content. Therefore, the page withdrawal function is invalid; some users often do not know whether the current data is old or updated. In this case, you need to clearly remind the user that "data has been updated ".
· The support for streaming media is not as good as FLASH and Java Applet.
Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet.
VII. AJAX Development
Now, you can clearly understand what AJAX is, what AJAX can do, and what AJAX is not. If you think AJAX can improve your development work, continue to see how to use AJAX.
7.1 AJAX application technology
Among the seven technologies involved in AJAX, I personally think Javascript, XMLHttpRequest, DOM, and XML are useful.

A. XMLHttpRequest object
XMLHttpRequest is the object of the XMLHTTP component. With this object, AJAX can exchange data only with the server like a desktop application, instead of refreshing the interface every time, you do not need to hand over data processing to the server every time. This reduces the server load, speeds up response, and shortens user waiting time.
Starting from IE5.0, developers can use the XMLHTTP ActiveX component in the Web page to expand their functions. They can directly transmit data to the server or receive data from the server without having to navigate the current Web page ., Mozilla1.0 and NetScape7 are used to create the XMLHttpRequest agent class that inherits XML. In most cases, the XMLHttpRequest object is similar to the XMLHTTP component. The method and attribute are similar, but some attributes are different.
XMLHttpRequest object initialization:
<Script language = "javascript">
Var http_request = false;
// IE browser
Http_request = new ActiveXObject ("Msxml2.XMLHTTP ");
Http_request = new ActiveXObject ("Microsoft. XMLHTTP ");
// Mozilla Browser
Http_request = new XMLHttpRequest ();
</Script>
XMLHttpRequest object method:
Method description
Abort () stops the current request
GetAllResponseHeaders () returns the complete headers as a string.
GetResponseHeader ("headerLabel") returns a single header label as a string
Open ("method", "URL" [, asyncFlag [, "userName" [, "password"]) sets the target URL, method, and other parameters of a pending request.
Send (content) send request
SetRequestHeader ("label", "value") sets the header and sends it together with the request
Attributes of the XMLHttpRequest object:
Attribute description
Onreadystatechange event trigger
ReadyState object status (integer): 0 = uninitialized 1 = read in progress 2 = read 3 = interaction in progress 4 = complete
The text version of the data returned by the responseText server process
ResponseXML: XML Document Object compatible with DOM returned by the server process
Status Code returned by the status server, such as: 404 = "file not found", 200 = "successful"
Status text returned by the statusText Server

B. Javascript
Javascript has been positioned as the script language of the client. The most widely used field is form data validation. Now, you can use Javascript to operate XMLHttpRequest to deal with databases.

C. DOM
DOM (Document Object Model) is a set of Apis provided for HTML and XML. It provides the file expression structure and can be used to change the content and visible objects. The scripting language can interact with the page through DOM. Web developers can operate and create file attributes, methods, and events in an object. For example, document indicates the page object itself.

D. XML
With XML (Extensible Markup Language), you can standardize the definition of structured data, which is consistent with the standards for data and documents transmitted online. Data and documents expressed in XML can be easily shared by all programs.