ajax method provides asynchronous access to the server without refreshing the page you can change the page content, using less native in reality principle but need to know are generally used jquey more lightweight implementation ajax but the principle is common of.
Native ajax course:
1. Create a core object ajax
IE browser core object XMLHTTP, other browser core object XMLHTTPRequest, so in order to solve the problem of different browsers compatible browser core object needs to judge
var xmlhttp;
if(window.XMLHTTP){
xmlhttp=new XMLHTTPRequest();
}else{
= new new ActiveXObject XMLHTTP ( "Microsoft.XMLHTTP"); // the following versions of IE6
}
2. Create request
open () has three parameters, the first parameter is a request mode, there are two post and get, get except that both faster and easier, in the following situations must post way
(1) a large amount of data transmission time to the server;
(2) sends an unknown character input, when such information is submitted in a form written by the user
(3) can not be used when the cache file
The second parameter is the address of the backend file, and the third parameter is asynchronous, asynchronous is available only to true, open messaging
xmlhttp.open("get","example.php",true);
3. Send request parameter
Different needs of different pages, need to rely on different data acquisition parameters to achieve the request, a plurality of connection requests between parameters &
xmlhttp.send("user="+user&"password="+password);
Only post requests on the parameters to be able to send, if a get request mode, the parameters are not allowed on the send (), but instead should be placed behind the back-end data file address? Connection, and also add in the middle the request header
xmlhttp.open("get","example.php?user="+user+"&password="+password",true);
xmlhttp.setRequestHeader("content-Type","application/x-www-form-urlencoded");
xmlhttp.send(null);
4. Accept Response
There are five page request status readyState, 0: 1 has not been initialized: Sending request 2: 3 to complete the request: acceptance response 4: complete response
The server returned status status 404: Page Not Found 200: 500 successful response: Internal Server Error
xmlhttp.onreadystatechange=functino(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
DATE = xmlhttp.responseText var // get the data using a text format, there are other ways to get data, help yourself
}
}
jquery ajax use:
1.post request method
$.ajax({
type: 'the POST', // mode request
URL: 'the example.php', // send the requested address dataType: 'JSON', // server returns the data type Data: {name: XXX, Age: XXX}, / / data sent to the server, the object must key / value format, jQuery automatically converted to string format success: function (data) { // request is successful, returns contents }, error: function (jqXHR) { // request fails, returns contents } });
2.get request method
$.ajax({
type:'GET',
url:'example.php?name'+=xxx, //发送请求的地址以及传输的数据
dataType:'json', //服务器返回的数据类型
success:function(data){
//请求成功，返回内容
},
error:function(jqXHR){
//请求失败，返回内容
}
});