Ajax
AJAX => Asynchronous Javascript And XML
Literal Translation: Asynchronous JavaScript and XML
AJAX is a without having to reload the entire page can be updated technical part of the page
Popular speaking, AJAX is JS through a web site to load data, this process is usually invisible to the user
Traditional web page (do not use AJAX) If you need to update content, it is necessary to reload the entire web page
In the process, the difference is that the synchronous and asynchronous sequential code execution.
Synchronization code, the code does not run in the order asynchronous run in sequence.
How to use ajax
XMLHttpRequest object can interact with the data server
W3C standard mainstream browsers support the XMLHttpRequest object (ajax Object)
Low version of the IE browser (IE5 and IE6) using ActiveXObject
1. Create an object ajax
if(window.XMLHttpRequest){ // 非IE5 IE6
var xhr=new XMLHttpRequest();
}else{ // IE5 IE6
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};
2. Connect server
xhr.open(method,url,async);
Parameter Description:
method: get or post request type
url: location of the file on the server
async: Optional, default true (asynchronous), false (synchronous)
Synchronization need to continue to wait for its return, without waiting for asynchronous
Typically use asynchronous (true), does not recommend the use of synchronous (false)
3. sends a request to the server
xhr.send(param);
param: For get request parameter is null or empty
When post request needs to be set before the http request header send (): the role of an analog form to pass parameters post
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
get and post the difference
* Get url parameters passed, post body on request (request body); and
* Get a limited length in the parameter request url passed, but without post;
* Get less secure than the POST, as shown in the url parameters directly, the sensitive data can not be transmitted;
* Get requests the browser cache will take the initiative, but will not post;
* Get request parameters will be saved in your browsing history, and post requests are not;
* The get and post are essentially tcp connection.
4. The response of the server
there readyState property of the XMLHttpRequest object state
readyState will change from 0 to 4:
0: Request uninitialized 1: 2 server connection is established: request has been received
3: Request Processing 4: request completed
When the readyState change will trigger onreadystatechange event
status: http request status code
Http status code representing the success or failure of the request and other information.
The following are common HTTP status code (HTTP Status Code):
* 200: The request success
* 301: page is redirected to another URL
* 304: file not been modified, use of cache resources
* 404: Can not find this page (specified resource)
* 500: internal server error
When readyState is 2004 and the status is, represents the response is ready, the request is successful
xhr.onreadystatechange=function (){
if (xhr.readyState == 4) {// request is completed
if (xhr.status == 200) {// ok successful
alert (xhr.responseText); // get a response result
} else{
alert (xhr.status); // pop failure status code
};
};
}
xhr.responseText text response data obtained
xhr.responseXML obtained in the form of XML response data