Ajax basics-Chapter 2)

Ajax is composed of HTML, JavaScript technology, DHTML, and Dom. This outstanding method can convert clumsy web interfaces into interactive Ajax applications.

XMLHTTPRequest object

<Script language = "JavaScript" type = "text/JavaScript">
VaR XMLHTTP = new XMLHttpRequest ();
</SCRIPT>
GET request object 

Create an XMLHTTPRequest object in the Microsoft browser

VaR XMLHTTP = false;
Try {
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
} Catch (e ){
Try {
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
} Catch (E2 ){
XMLHTTP = false;
}
}
Depending on the version of JavaScript technology installed in Internet Explorer, MSXML actually has two different versions. Therefore, you must write code for these two cases:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

And

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

If the selected browser is not Internet Explorer, or you want to write code for a non-Microsoft browser:

XMLHTTP = new XMLHttpRequest ();

Send request:

There is a brand newXMLHttpRequestObject, followed by a process that is basically the same in all Ajax applications:

1. Obtain the required data from the web form.
2. Create the URL to be connected.
3. Open the connection to the server.
4. Set the function to run after the server is complete.
5. Send a request.

Handling response:

Function updatepage (){
If (XMLHTTP. readystate = 4 ){
VaR response = XMLHTTP. responsetext;
Document. getelementbyid ("XXXX"). value = response;
}
}
XMLHttpRequestSeveralMethods and attributes:

open(): Create a new request to the server.

send(): Send a request to the server.

abort(): Exit the current request.

readyState: Provides the current HTML readiness status.

responseText: Request Response text returned by the server.

CREATE request URL:

<Input type = "text" size = "14" name = "phone" id = "phone" onchange = "getcustomerinfo ();"/>
VaR phone = Document. getelementbyid ("phone"). value;
VaR url = "/cgi-local/lookupcustomer. php? Phone = "+ escape (phone );

If you have never seen it beforeescape()To escape any characters that cannot be correctly sent in plain text. For example, the space in the phone number will be converted into characters.%20To pass these characters in the URL.

You can add any number of parameters as needed. For example, to add another parameter, you only need to append it to the URL and "(&) Character separation [the first parameter is subject to question mark (?) Is separated from the script name].

Open request:

With the URL to be connected, you can configure the request. AvailableXMLHttpRequestObjectopen()Method. This method has five parameters:

• Request-type: Type of the request to be sent. The typical value isGETOrPOST, But can also be sentHEADRequest.
• URL: URL to be connected.
• Asynch: True if you want to use an asynchronous connection; otherwise, false. This parameter is optional. The default value is true.
• Username: If you need authentication, you can specify the user name here. This optional parameter has no default value.
• Password: If you need authentication, you can specify a password here. This optional parameter has no default value.

The first three parameters are usually used. In fact, even if an asynchronous connection is required, the third parameter should be specified as "true ". This is the default value.

Set the URL, which is used by most requests.GETThat's enough (you will see the need to usePOSTAnd add the URL.open()All content required by the method:

Request. Open ("get", URL, true );

Send request:Request. Send (null );

Send () has only one parameter, that is, the content to be sent. However, you can usesend()Send data, but data can also be sent through the URL itself. In fact,GETIn typical Ajax applications, it is much easier to send data using URLs. If you want to send security information or XML, consider usingsend()Sent content. If you do not need to passsend()To pass data, you only need to passnullAs a parameter of this method.

Specify the callback Method:Request. onreadystatechange =

Note that this attribute is set in the code.Location-- It is calledsend() BeforeSet.

HTTP readiness:

Five readiness statuses are required for Ajax applications:

Function updatepage (){
If (request. readystate = 4)
If (request. Status = 200)
Alert ("server is done! ");
}
Read response text:

0: The request is not sent (open()Before ).

1: The request has been created but has not been issued (callsend()Before ).

2: The request is being processed (the content header can be obtained from the response ).

3: The request has been processed, and some data is usually available in the response, but the server has not yet completed the response.

4: The response has been completed. You can access the server response and use it.

HTTP status code:

In addition to the ready status, you also need to check the HTTP status. The expected status code is 200, indicating that everything went well. If the ready status is 4 and the status code is 200, the server data can be processed, and the data should be the required data.

Finally, we can process the data returned by the server. The returned data is stored inXMLHttpRequestObjectresponseTextAttribute.

AboutresponseTextThe text content, such as the format and length, is intentionally vague. In this way, the server can set the text to any content. For example, a script may return values separated by commas (,), and a pipeline character (that is|Character), and returns a long text string. The server determines where to go.

Another important attribute of XMLHttpRequestresponseXML. If the server chooses to use XML response, this attribute contains (as you may have guessed) XML response. Processing XML responses is very different from processing common text, involving parsing, Document Object Model (DOM) and other issues. XML will be further introduced later.

We can process the data returned by the server, and the returned data is saved inXMLHttpRequestObjectresponseTextAttribute.

 XMLHttpRequestAnother important attributeresponseXML. If the server chooses to use the XML response, this attribute contains the XML response.

Processing XML responses is very different from processing common text, involving parsing, Document Object Model (DOM) and other issues. Next

Step by step, we will introduce XML.