Initial Ajax solution (1)

WEB development involves more or less front-end knowledge, such as JS, HTML, and CSS. WEB application interaction with many functions is more complex. To improve user experience, Ajax technology is often used for data communication. Although I have used Ajax many times in my daily work, I just have a few preliminary experiences. I don't have a systematic understanding of its implementation mechanism. Therefore, I am going to prepare materials and learn more about this part.
Today, I mainly want to sort out how to send an Ajax request.

XMLHttpRequest object
This is a built-in JS object and the core of Ajax. This object can implement asynchronous communication between the client and the server, and implement data request and processing without blocking users. The processing is based on a status code readyState, which ranges from 0 to 4.

Create
The process of creating an XMLHttpRequest object varies with browser implementations. If the browser supports the XMLHttpRequest object as a window attribute (this applies to all common browsers except IE 5 and IE 6), the code can call the XMLHttpRequest constructor. If the browser implements the XMLHttpRequest object as an ActiveXObject object (like in IE 5 and IE 6), the code can use the ActiveXObject constructor.
[Javascript]
Var xmlHttpReq;
Function createXMLHTTPRequest (){
<Span style = "white-space: pre"> </span> if (window. ActiveXObject ){
<Span style = "white-space: pre"> </span> xmlHttpReq = new ActiveObject ("Microsoft. XMLHTTP ");
<Span style = "white-space: pre"> </span>} else if (window. XMLHTTPRequest ){
<Span style = "white-space: pre"> </span> xmlHttpReq = new XMLHTTPRequest ();
<Span style = "white-space: pre"> </span>}
};

Send request
When sending a request, pay attention to the following methods and attributes of the XMLHttpRequest object:
Open: Initialize the XMLHttpRequest object
Onreadystatechange: registers the status change processing function.
Send: send a request
[Javascript]
Function sendRequest (){
<Span style = "white-space: pre"> </span> xmlHttpReq = createXMLHTTPRequest ();
XmlHttpReq. open ("GET", "validateForm? CatalogId = "+ catalogId, true );
// Processing function www.2cto.com when the registration status value changes
XmlHttpReq. onreadystatechange = processRequest;
// Send the request
XmlHttpReq. send (null );
};

Processing result
In the previous step, we registered a function processRequest for calling when the status value changes. The main function is to check whether the request is successfully processed and returned through the status value, and then parse the returned results, follow-up operations:
[Javascript]
Function processRequest (){
<Span style = "white-space: pre"> </span> if (xmlHttpReq. readyState = 4 ){
<Span style = "white-space: pre"> </span> if (xmlHttpReq. status = 200 ){
<Span style = "white-space: pre"> </span> var msg = xmlHttpReq. responseXML;
<Span style = "white-space: pre"> </span> var textt = xmlHttpReq. responseText;
<Span style = "white-space: pre"> </span> // to do <span style = "white-space: pre"> </span>
<Span style = "white-space: pre"> </span>}
<Span style = "white-space: pre"> </span>}
};
So far, an Ajax request is complete.

Use the jQuery framework to send Ajax requests
The above method is cumbersome to send Ajax requests. Therefore, in most cases, we use jQuery's Ajax support to implement asynchronous requests. The code is quite concise:
[Javascript]
$. Ajax (settings );
I will not go into details here. For details about the usage, refer to the jQuery API documentation.

 

 

From xinsheng2011