AJAX： Asyncchronous Javascript + XMLL
XMLHttpRequest對象（XHR）
以異步的方式從服務(wù)器獲取數(shù)據(jù)，獲取新數(shù)據(jù)后督怜，通過DOM的方式將新數(shù)據(jù)插入到頁面中漩符。
1. 新建XHR對象
- IE7+思恐、現(xiàn)代瀏覽器d都支持原生的XHR對象
var xhr = new XMLHttpRequest();
2. open(method, url, boolean)
-
method: 發(fā)送請求的類型（get荒吏、post敛惊、delete、put等） -
url： 請求URL（相對路徑是相對于當(dāng)前頁面或者絕對路徑） -
boolean： 是否異步發(fā)送請求
3. send():一個參數(shù)绰更，作為請求主體發(fā)送的數(shù)據(jù)瞧挤，或者為null
收到相應(yīng)請求后，響應(yīng)數(shù)據(jù)會自動填充XHR對象的屬性儡湾。
-
responseTetx作為響應(yīng)主體被返回的文本特恬。 -
responseXML響應(yīng)類型是text/xml或者application/xml，保存包含響應(yīng)數(shù)據(jù)的XML DOM文檔徐钠。 -
statusHTTP響應(yīng)狀態(tài) -
statusTextHTTP響應(yīng)狀態(tài)說明
4. 同步方式請求
var xhr = new XMLHttpRequest();
xhr.open('get', 'example.json', false);
xhr.send(null);
if((xhr.status > 200 && xhr.status < 300) || xhr.status == 304){
//xhr.responseText;
//通過檢測xhr.status來檢測請求返回狀態(tài)癌刽，不要依賴statusText，因?yàn)榭鐬g覽器時statusText不可靠
}else{
//請求錯誤, 輸出錯誤log：xhr.status
}
5. 異步方式請求
異步請求，檢測XHR對象的<code>readyState</code>屬性妒穴，該屬性表示請求/響應(yīng)過程中的當(dāng)前活動階段。
-
0 ： 未初始化摊崭。尚未調(diào)用
open()方法讼油。 -
1 ： 啟動。已經(jīng)調(diào)用
open()方法呢簸， 但未調(diào)用send()方法矮台。 -
2 ： 發(fā)送。已經(jīng)調(diào)用
send()方法根时， 但未接收到響應(yīng)瘦赫。 - 3 ： 接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)蛤迎。
- 4 ： 完成确虱。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，已經(jīng)可以在客戶端使用替裆。
readyState值變化都會觸發(fā)readystatechange時間
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status > 200 && xhr.status < 300 || xhr.status == 304){
alert(xhr.reponseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
xhr.open('get', 'example.json', true);
xhr.send(null);
6. 取消異步請求
xhr.abort()
7.HTTP頭部信息
-
Accept瀏覽器處理的內(nèi)容類型 -
Accept-Charset顯示的字符集 -
Accept-Econding處理的壓縮編碼 -
Connection與服務(wù)器之間的連接類型 -
CookieCookie設(shè)置 -
Host發(fā)出請求所在的域 -
Referer發(fā)出請求坐在的URI
xhr.setRequestHeader('HeaderName', 'HeaderVal'); 使用自定義的頭部字段名稱校辩，有些瀏覽器禁止修改默認(rèn)的頭部字段 。
xhr.getResponseHeader('HeaderName');
xhr.getAllResponseHeaders();
function create_connect_obj(){
if(window.ActiveXObject!='undefined' && window.ActiveXObject!=undefined){
return new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest!='undefined' && window.XMLHttpRequest!=undefined){
return new XMLHttpRequest();
}
}
var doget=function(url,data,success,fail){
var conn=create_connect_obj();
if(typeof(data)=='object'){
var str='';
for(var i in data){
str+='&'+i+'='+data[i];
}
str=str.substr(1);
if(url.indexOf('?')!=-1){
url+=str;
}else{
url+='?'+str;
}
}else if(typeof(data)=='string'){
if(url.indexOf('?')!=-1){
url+=data;
}else{
url+='?'+data;
}
}
conn.open('GET',url);
conn.send(null);
conn.onreadystatechange=function(){
if(conn.readyState==4 && conn.status==200){
if(typeof(data)=='function'){
data(conn.response);
}else if(typeof(success)=='function'){
success(conn.response); //success
}
}else{
if(typeof(fail)=='function'){ //fail
fail();
}
}
}
}
var dopost=function(url,data,success,fail){
var conn=create_connect_obj();
conn.open('POST',url);
conn.setRequestHeader('Content-type','application/x-www-form-urlencoded');
if(typeof(data)=='object'){
var str='';
for(var i in data){
str+='&'+i+'='+data[i];
}
str=str.substr(1);
conn.send(data);
}else if(typeof(data)=='string'){
conn.send(data);
}else{
conn.send(null);
}
conn.onreadystatechange=function(){
if(conn.readyState==4 && conn.status==200){
if(typeof(data)=='function'){
data(conn.response);
}else if(typeof(success)=='function'){
success(conn.response); //success
}
}else{
if(typeof(fail)=='function'){ //fail
fail();
}
}
}
}
