AJAX engine experience (1)

I. Main reasons for using the AJAX Engine

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. The following is a summary of AJAX engine experience.

Ii. References

Jesse James Garnett, the earliest author of Ajax, 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 presentation;
◆ Use DOM for Dynamic Display and interaction;
◆ Use XML and XSLT for data exchange and processing;
◆ Use XMLHttpRequest for asynchronous data reading;
◆ Finally, bind and process all data with JavaScript;

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

Iii. AJAX engine 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 also add XML (the data returned by Ajax from the server can be in XML format or other formats such as text ).

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.

XMLHttpRequest application:

· XMLHttpRequest object application in JS

 
 

  
  
var xmlhttp = new XMLHttpRequest(); 
 
 

· Application of Microsoft's XMLHTTP component in JS

 
 

  
  
VarXmlhttp=NewActiveXObject (Microsoft. XMLHTTP );
  
  
VarXmlhttp=NewActiveXObject (Msxml2.XMLHTTP );
  
  
XMLHttpRequest object Method
  
  
/**
  
  
* Cross-browser XMLHttpRequest instantiation.
  
  
*/
  
  
 
  
  
If (typeofXMLHttpRequest= 'Undefined '){
  
  
　XMLHttpRequest=Function(){
  
  
VarMsxmls= ['Msxml3', 'msxml2', 'Microsoft ']
  
  
For (varI=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

Then we will continue to summarize the experience of the AJAX engine.