Ajax usage Summary

Ajax was also used when the undergraduate course was set up. However, most browsers were unable to asynchronously update the page content. Some time ago I did a demo (the evil demo asked me to review how many things & hellip;) and I took ajax to review it again. Finally, I can adapt to... SyntaxHighlighter.

Ajax was also used when the undergraduate course was set up. However, most browsers were unable to asynchronously update the page content.

Some time ago I made a demo (the evil demo asked me to review how many things ......) I reviewed ajax again and finally adapted it to the newer versions of mainstream ie, firefox, and chrome browsers. (For the last year, I have not tried any earlier versions, but surely there is no problem.

Summary:

1. ajax implementation steps
To Implement Asynchronous ajax update, an asynchronous communication method is required. You only need to call this asynchronous communication method in the html Tag event processing script or other js Code on the page to complete asynchronous page update. This method includes the following steps:
S1: Get An XMLHttpRequest object

S2: compile a processing function and bind it to the onreadystatechange event of the XMLHttpRequest object. This processing function is used to process the changes in the ajax Request status.

S3: open a request on the XMLHttpRequest object, for example, xmlHttp. open ("GET", "status. jsp? Id = "+ Math. random ());

S4: setRequestHeader ("header", "value"); you can set various headers. If the server does not need header information, you can skip this step.

S5: send () request

The most important thing is s2 and s3.

2. Get the XMLHttpRequest object
This is OK.

[Javascript]
Var xmlHttp;
Function createXmlHttpRequest ()
{
If (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
Else if (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}

Var xmlHttp;
Function createXmlHttpRequest ()
{
If (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
Else if (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}
3. Write processing functions

The processing function is basically like this:

[Javascript]
Function processXXX ()
{
If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
//......
}
}
}

Function processXXX ()
{
If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
//......
}
}
}
You can get responseText or responseXML through xmlHttp to get the response in the string or xml form on the server side. The former is usually a section that can be directly used to update the page content, while the latter is the data in xml format, you can use js to retrieve the element values. Select one of them as needed. For example, the processing function for updating a statistical value on the page is as follows:

[Javascript]
Function processStatistics ()
{
Var responseContext;
If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
ResponseContext = xmlHttp. responseText;
Document. getElementById ("statistics"). innerHTML = responseContext;
}
}
}

Function processStatistics ()
{
Var responseContext;
If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
ResponseContext = xmlHttp. responseText;
Document. getElementById ("statistics"). innerHTML = responseContext;
}
}
}

4. Send asynchronous requests

This step is the key to ajax. It is done by calling the open and send methods of xmlHttp, for example:

[Javascript]
XmlHttp. open ("GET", "status. jsp? Id = "+ Math. random (), true );
XmlHttp. send (null );

XmlHttp. open ("GET", "status. jsp? Id = "+ Math. random (), true );
XmlHttp. send (null );
Generally, you can use the GET method in a few request parameters. The second parameter of open is a url of the server to be requested, which can be jsp, servlet, or struts2 action. If it is struts2 action, do not configure the return view in the Custom action controller. Use the servlet api in the execute method to get PrintWriter, write the content to be returned, and flush + close PrintWriter, return null in the execute method (do not jump to an attempt. The id parameter in the url is meaningless, but it is very important. Many browsers have cache. When you request an address, the browser checks whether the cache contains the latest response content of this url. If yes, the browser will not send a request to the server, but directly return the content in the cache, which improves the browsing speed. Browser cache is based on the assumption that the content of a webpage will not be updated in a short period of time. However, ajax sometimes requires frequent asynchronous updates (such as scheduled updates to the system status on the page). Therefore, you need to add a random parameter to prevent the content in the cache from affecting page updates. The third parameter of open is true, indicating that the request is processed asynchronously. ajax must use true. Generally, this parameter is true by default.

The parameter of the send method is null in GET mode. In POST mode, the send parameter is the key-value data to be sent. Multiple data entries are separated, if post is to send data in the form of a form, you also need to set the header: