A simple example will show you how to unveil the secrets of AJAX

This article uses a simple example to illustrate how to use Ajax technology in ie6. In this example, the client retrieves a random string from the server every 10 seconds and automatically updates part of the page without refreshing the page. The example uses only two JSP files: client. jsp and server. jsp.

Ajax, short for "Asynchronous JavaScript and XML", can be translated into Asynchronous JavaScript and XML technologies. Its core is a class named XMLHttpRequest in the browser. With this feature, you can connect to the server without submitting a form. Without refreshing the entire page, you can dynamically update part of the content on the page. XMLHttpRequest generally uses XML as the carrier of data exchange, but other carriers such as plain text can also be used. Simply put, it is to send information to the server through XMLHttpRequest, asynchronously receive the server's processing and return information, and then dynamically update part of the page content through JavaScript.

Although Ajax is very popular recently, Ajax is not a new technology, as shown in its name. It is just a javascript plus XML technology. It is easy to use.

Ajax application process:
1. Define an event Processor
2. Get XMLHttpRequest and register the event processor with it.
3. Connect to the server
4. send information
5. The server returns the processed information.
6. The event processor is automatically triggered whenever the status of XMLHttpRequest changes.
7. Event processor Dynamic Update page

This article uses a simple example to illustrate how to use Ajax technology in ie6. In this example, the client retrieves a random string from the server every 10 seconds and automatically updates part of the page without refreshing the page. The example uses only two JSP files: client. jsp and server. jsp. For convenience, I used server. jsp to replace server. Java, which should have been used as a servlet.

First look at the client. jsp content:

Http://www.w3.org/TR/html4/loose.dtd>



<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">

<Script language = "JavaScript">
VaR XMLHTTP;

Function getgiftfromserver (){
VaR url = "http: // localhost: 8084/ajax/server. jsp ";
If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}

XMLHTTP. onreadystatechange = showgift;

XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );

SetTimeout ("Fig ()", 10000 );
}

Function showgift (){
If (XMLHTTP. readystate = 4 | XMLHTTP. readystate = "complete "){
Document. getelementbyid ("output"). innerhtml = "time is for" + XMLHTTP. responsetext + ".";
}
}
</SCRIPT>



Ajax example



When a page is loaded, the getgiftfromserver () function of JavaScript is called. This function completes steps 1st to 4th in the preceding Ajax application process, at the same time, a timer is set to automatically call this function every 10 seconds. The showgift () function completes steps 5th to 7th of the process. The following describes each step in detail.

 1. Define the event processor, which is automatically triggered when the server returns data. 

 function showgift () {
 If (XMLHTTP. readystate = 4 | XMLHTTP. readystate = "complete") {
 document. getelementbyid ("output "). innerhtml = "time is for" + XMLHTTP. responsetext + ". "; 
}< BR >}< br> 
 because asynchronous is used here, the readystate attribute is used to determine the status of information returned by the server. The value is an integer from 0 to 4, corresponding to: 
 0: the object has been created, but not initialized (the open () method is not called) 
 1: the object has been created, but the send () method has not been called 
 2: The send () method has been called, but the status and headers are not available 
 3: some data has been returned, but status and headers are not fully available 
 4: All data has been received, use all data 
  2. Obtain XMLHttpRequest and register the event processor with it  
 note: to use XMLHttpRequest, ie5.0 or later is required. 
 2.1 get XMLHttpRequest 
 Get XMLHttpRequest before ie7.0 and use the following  Code : 
 

If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}

In ie7.0:
 

 
If (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest
}

2.2 register an event Processor
 

 
XMLHTTP. onreadystatechange = showgift;

Showgift is the name of the passed method. This method is executed whenever the XMLHttpRequest status changes.

3. Connect to the server and send

 

 
XMLHTTP. Open ("get", URL, true)

The method signature is as follows:

 

XMLHTTP. Open (bstrmethod, bstrurl, varasync, bstruser, bstrpassword)

Where:
Bstrmethod: connection method. available include get, post, put, or PROPFIND.
Bstrurl: Server URL
Varasync (optional): whether the call is asynchronous. The default value is true (return immediately after the call)
Bstruser (optional): User name. If the URL needs to be verified, it is attached.
Bstrpassword (optional): password. If the URL needs to be verified, it is attached.

The open () method can directly open an XML document and read the corresponding node through the responsexml of XMLHTTP. For example:
 

 
XMLHTTP. Open ("get", "http: // localhost/books. xml", false );
XMLHTTP. Send ();
VaR book = XMLHTTP. responsexml. selectsinglenode ("// book [@ ID = 'bk101 ']");

4. send information
 

 
XMLHTTP. Send (null)

The method signature is as follows:
 

XMLHTTP. Send ([varbody])

Varbody (optional): it can be a string, XML, or other data, and can be null. No return value

This method returns immediately when open () is set to asynchronous. When open () is set to synchronous, it must wait until the reponse object returns from the server.

5. The server returns the processed information.

In this case, the server is working. The server. JSP code is as follows:

Randomly select one of the three strings and write them to the response to return to the client.

6. The client automatically detects that the XMLHttpRequest status has changed and the event processor is automatically triggered.

7. Event processor Dynamic Update page

The processor reads the value of XMLHTTP. responsetext and dynamically updates it through JavaScript.
 

.

 
Document. getelementbyid ("output"). innerhtml = "time is for" + XMLHTTP. responsetext + ".";
 

Conclusion:

As shown in the last seven steps, Ajax is not complicated and far simpler than imagined. Keep this in mind. "ajax allows us to dynamically update some content on the webpage without refreshing the page", and then apply it to various scenarios that require such performance, this will make our webpage more creative.