Table of contents
Open Table of contents
Article body
When you type a search into Baidu, related suggestions appear below the search box. This is a typical example of asynchronous Ajax interaction. You don’t need to finish typing and click the search button: the page communicates with the server as you type and displays the information without reloading. Ajax provides the communication between the page and the server.
We usually use Ajax through jQuery’s $.ajax(){
type:“post/get”,
url:“REQUEST_RESOURCE_URL”,
async:“WHETHER_TO_USE_ASYNC”,---defaults to true when omitted
data:“DATA_TO_SEND”,
dataType:“RESPONSE_DATA_FORMAT”，----usually JSON
success:function(){
Callback on success
},
error:function(jqXHR){
Operations to perform on failure
}
}
This is how we perform asynchronous communication between a page and a server.
A key object in Ajax communication is XMLHttpRequest, abbreviated as XHR. You can see this name in the Network panel of Chrome’s developer tools.
Microsoft first introduced XHR in Internet Explorer. Without jQuery’s wrapper, the underlying Ajax process works as follows.
- Create an XHR object when you need to communicate asynchronously with the server.
The usual approach is if（window.XHLHttpRequest){
XMLHttpRequest xhr = new XMLHttpRequest();
}
For completeness, early versions of IE used an Active Object rather than XMLHttpRequest. You could obtain it as follows:
if(window.ActiveObject){
XMLHttpRequest xhr = new ActiveObject(“Microsoft.XMLHTTP”);
}
- After creating the XHR object, call its open() method to prepare the server request.
xhr.open(url,method,async);
The open() method has three parameters here: url is the server URL, method is GET, POST, DELETE, or another HTTP method, and async is a Boolean. When async is true, communication is asynchronous; when it is false, it is not.
- Send the data.
xhr.send();
- Monitor the XHR object’s state and invoke the callback based on that state.
xhr.onreadystatechange = callBack();
An XHR object has five states:
0---XHR has not been initialized
1---XHR has been initialized and is ready to send
2---XHR has sent the data
3---The server response is being received
4---The response has been received
When the XHR state is 4, the interaction between the page and the server is complete.
function callBack(){
if(xhr.readyState == 4){
if(xhr.status ==200){
Handle the server response here
}
}
That covers the basic Ajax process. In practice, most people now use jQuery’s wrapper, as shown at the beginning of this article.