Ajax internal communication document

I. Main reasons for using Ajax 1. Better User experience through appropriate Ajax applications;
　　 2. Transfer the previous server workload to the client, which facilitates the idle processing capability of the client to reduce the burden on the server and bandwidth, this saves ISP space and bandwidth rental costs.Ii. References Jesse James Garnett, the earliest author of the Ajax concept, believes that:
Ajax is short 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 respective roles in the same collaboration, including
Use XHTML and CSS for standardized rendering;
Use DOM for Dynamic Display and interaction;
Use XML and XSLT for data exchange and processing;
Use XMLHttpRequest for asynchronous data reading;
Finally, use JavaScript to bind and process all data;
The working principle of Ajax is equivalent to adding an intermediate layer between the user and the server, so that user operations and server responses are asynchronous. Not all user requests are submitted to the server, for example, some data verification and data processing are handed over to the Ajax engine, the Ajax engine submits requests to the server only when it is determined that new data needs to be read from the server.
Figure 2-1

Figure 2-2 3. Overview although Garrent lists seven Ajax components, I personally think that the core of the so-called Ajax is JavaScript, XMLHTTPRequest, and DOM, if the data format is XML, you can add XML (the data returned by Ajax from the server can be XML or 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.
Application of XMLHttpRequest: Application of XMLHttpRequest object in JS
Var xmlhttp = new XMLHttpRequest ();
Application of Microsoft XMLHTTP component in JS
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 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	Description
Abort ()	Stop current request
GetAllResponseHeaders ()	Returns the complete headers as a string.
GetResponseHeader ("headerLabel ")	Returns a single header tag as a string.
Open ("method", "URL" [, asyncFlag [, "userName" [, "password"])	Set the target URL, method, and other parameters for pending requests
Send (content)	Send request
SetRequestHeader ("label", "value ")	Set the header and send it together with the request

XMLHttpRequest object attributes

Attribute	Description
Onreadystatechange	Event triggers with status changes
ReadyState	Object status (integer ): 0 = not initialized 1 = reading 2 = read 3 = interaction in progress 4 = complete
ResponseText	The text version of the data returned by the server process
ResponseXML	XML document objects compatible with DOM returned by Server Processes
Status	Status Code returned by the server, for example, 404 = "found at the end of the file", 200 = "successful"
StatusText	Status text returned by the server

　　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. 4. The emergence of the Ajax concept opens the prelude to the non-Refresh page era, and there is a tendency to update web pages by submitting forms in traditional web development, it can be regarded as a milestone. 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. V. Ajax advantages1. reduce the burden on the server. Because the fundamental idea of Ajax is to "retrieve data on demand", it is possible to minimize the burden on servers caused by redundant requests and sound shadows;
　　2. The page is refreshed to reduce the user's actual and psychological waiting time;
First, the "retrieve data on demand" mode reduces the actual amount of data read, if the method of overloading is to return from one end point to the origin point and then to another end point, Ajax means to reach another end point based on one end point;
Figure 5-1

Figure 5-2

Second, even if you want to read large data, you do not need to use a white screen like RELOAD. Because Ajax uses XMLHTTP to send a request to obtain the server response data, when the entire page is not re-loaded, Javascript is used to operate the DOM to finally update the page. Therefore, when reading data, the user is not facing a white screen, but the original page status (or you can add a LOADING prompt box to let the user know the status of Data Reading). The content of the corresponding part is updated only after receiving all the data, this kind of update is also instantaneous, and users can hardly feel it. In short, users are very sensitive. They can feel that you are considerate to them. Although they are unlikely to have immediate results, they will accumulate their dependence on the website by 1.1 in the hearts of users.
　　3. Better User Experience;
　　4. Some previous server workload can also be transferred to the client, which facilitates the idle processing capability of the client, reduces the server and bandwidth burden, and saves space and bandwidth rental costs;
　　5. Ajax can call external data;
　　6. It is based on standardized and widely supported technologies, and does not require plug-ins or downloading applets;
　　7. Ajax separates the WEB interface from the application (or data and presentation separation );
　　8. This is a double profit for users and ISPs.6. Ajax Problems 1. Some handheld devices (such as mobile phones and PDAs) cannot support Ajax well now;
2. JavaScript-based Ajax engines, JavaScript compatibility and debugging are a headache;
3. Ajax does not refresh any new loads, because the page changes are not as obvious as refreshing or reloading, it is easy to cause problems to users-users are not sure whether the current data is new or updated. The existing solutions include: the relevant location prompts, data update areas are designed to be obvious, and user prompts are given after the data is updated;
4. The support for streaming media is not as good as FLASH and Java Applet. 7. Conclusion: Ajax applications with better performance require more client development and reflection on current WEB application concepts, moreover, a good user experience comes from the idea of thinking for users everywhere, rather than simply a technology. 8. DEMO Ajax image browser DEMO:
Http://www.DragonSon.com/pic/ 9, contact MSN: waymangood@hotmail.com
OICQ: 458620
E-mail: amourguo@gmail.com
Website: http://www.DragonSon.com