AJAX——理解XMLHttpRequest對象

          AJAX你們已經都知道了，XMLHttpRequest對象則是AJAX的核心。這篇博客重點總結一下這個對象的使用。

 

XMLHttpRequest對象的屬性和方法：

 

屬性	說明
readyState	表示XMLHttpRequest對象的狀態：0：未初始化。對象已建立，未調用open； 1：open方法成功調用，但Sendf方法未調用； 2：send方法已經調用，還沒有開始接受數據； 3：正在接受數據。Http響應頭信息已經接受，但還沒有接收完成； 4：完成，即響應數據接受完成。
Onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼。200表示「成功」，404表示「未找到」，500表示「服務器內部錯誤」等。
statusText	服務器返回狀態的文本信息。

 

 

方法	說明
Open(string method,string url,boolean asynch, String username,string password)	指定和服務器端交互的HTTP方法，URL地址，即其餘請求信息； Method:表示http請求方法，通常使用"GET","POST". url：表示請求的服務器的地址； asynch：表示是否採用異步方法，true爲異步，false爲同步； 後邊兩個能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼。
Send(content)	向服務器發出請求，若是採用異步方式，該方法會當即返回。 content能夠指定爲null表示不發送數據，其內容能夠是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)	設置HTTP請求中的指定頭部header的值爲value. 此方法需在open方法之後調用，通常在post方式中使用。
getAllResponseHeaders()	返回包含Http的全部響應頭信息，其中相應頭包括Content-length,date,uri等內容。 返回值是一個字符串，包含全部頭信息，其中每一個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	中止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

　　

XMLHttpRequest對象的兼容性：

• IE8/IE九、Opera Mini 徹底不支持xhr對象

• IE10/IE11部分支持，不支持 xhr.responseType爲json

• 部分瀏覽器不支持設置請求超時，即沒法使用xhr.timeout

• 部分瀏覽器不支持xhr.responseType爲blob

　　

XMLHttpRequest對象的應用：

 1 function ajax(url,postData,fnSuc){
 2       var xhr;
 3       if(window.XMLHttpRequest){
 4         xhr= new XMLHttpRequest();
 5         //console.log(xhr);
 6       }else{
 7         // alert("不存在");
 8         xhr= new ActiveXObject("Microsoft.XMLHTTP");
 9          //alert(xhr);
10       }//XMLHttpRequest兼容性處理
11     xhr.open("POST", url , true);//指定請求的方式post/get,url,true/false(異步/同步)
12     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
13     xhr.onreadystatechange = function(){//請求狀態改變時觸發
14         var XMLHttpReq = xhr;
15         if (XMLHttpReq.readyState == 4) {//數據接受完成
16             if (XMLHttpReq.status == 200) {//服務器返回的http狀態碼,200表示成功
17                 var text = XMLHttpReq.responseText;//服務器響應的文本內容
18                 fnSuc(JSON.parse(text));//請求成功時返回的數據
19             }
20         }
21     };
22     postData = (function(obj){ // 轉成post須要的字符串
23         var str = "";
24         for(var prop in obj){
25             str += prop + "=" + obj[prop] + "&"
26         }
27         return str;
28     })(postData);
29     xhr.send(postData);//向服務器發送請求
30 }

 

這是XMLHttpRequest簡單的應用，使用時直接調用就好了，使用的是post請求能夠傳參，返回的是json數據便於處理，固然有其餘需求能夠根據狀況添加。