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/IE9、Opera Mini 完全不支持xhr對象

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

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

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

　　

XMLHttpRequest對象的應用：

function ajax(url,postData,fnSuc){
      var xhr;
      if(window.XMLHttpRequest){
        xhr= new XMLHttpRequest();
        //console.log(xhr);
      }else{
        // alert("不存在");
        xhr= new ActiveXObject("Microsoft.XMLHTTP");
         //alert(xhr);
      }//XMLHttpRequest兼容性處理
    xhr.open("POST", url , true);//指定請求的方式post/get,url,true/false(異步/同步)
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.onreadystatechange = function(){//請求狀態改變時觸發
        var XMLHttpReq = xhr;
        if (XMLHttpReq.readyState == 4) {//數據接受完成
            if (XMLHttpReq.status == 200) {//服務器返回的http狀態碼,200表示成功
                var text = XMLHttpReq.responseText;//服務器響應的文本內容
                fnSuc(JSON.parse(text));//請求成功時返回的數據
            }
        }
    };
    postData = (function(obj){ // 轉成post需要的字符串
        var str = "";
        for(var prop in obj){
            str += prop + "=" + obj[prop] + "&"
        }
        return str;
    })(postData);
    xhr.send(postData);//向服務器發送請求
}

 

這是XMLHttpRequest簡單的應用，使用時直接調用就行了，使用的是post請求可以傳參，返回的是json數據便於處理，當然有其他需求可以根據情況添加。