摘要：一次完整的請求對于很多對象來說，都會有狀態，事件和方法。其中的狀態和事件其實就是對象的屬性。下載的事件屬于對象，上傳的事件屬于對象。事件傳輸被用戶取消。返回所有響應頭信息響應頭名和值如果響應頭還沒接受則返回重寫由服務器返回的。

XMLHttpRequest可解釋為可擴展超文本傳輸請求。它是一個瀏覽器Api，為客戶端提供了在客戶端和服務器之間傳輸數據的功能。使得Javascript可以進行HTTP(S)通信。特點是能在不更新頁面的情況下獲取數據，這使得網頁只更新一部分頁面而不會打擾到用戶。我們常接觸的Ajax的核心就是XMLHttpRequest。

一次完整的XMLHttpRequest請求

對于很多js對象來說，都會有狀態，事件和方法。其中的狀態和事件其實就是對象的屬性。狀態大多是一個值為function的屬性。同樣的，XMLHttpRequest也有這三樣東西。

XMLHttpRequest有一下5種狀態：

0——unsent未打開————————————open()方法還未被調用
1——opened為發送————————————send()方法還未被調用
2——HEADERS_RECEIVED已獲取響應頭——send()方法已經被調用, 響應頭和響應狀態已經返回
3——LOADING正在下載響應體———————響應體下載中; responseText中已經獲取了部分數據
4——DONE請求完成————————————整個請求過程已經完畢

onreadystatechange()

XMLHttpRequest提供了一個onreadystatechange事件用于監聽XMLHttpRequest狀態的改變。當狀態改變時會觸發此方法，用于對不同狀態下進行處理，包括完成后的數據處理、發生錯誤時關閉請求的處理、請求超時的處理等。
一個簡單的例子：

objXMLHttp.onreadystatechange =  processResponse(){
    if(objXMLHttp.readyState == 1){
        alert("XMLHttpRequest對象開始發送請求");
    }else if(objXMLHttp.readyState == 2){
        alert("XMLHttpRequest對象的請求發送完成");
    }else if(objXMLHttp.readyState == 3){
        alert("XMLHttpRequest對象開始讀取服務器的響應");
    }else if(objXMLHttp.readyState == 4){
        alert("XMLHttpRequest對象讀取服務器響應結束");
        if(objXMLHttp.status == 200){
            //信息已經成功返回，開始處理信息
            //先捕獲下所有的請求頭
            var headers = objXMLHttp.getAllResponseHeaders();
            alert("所有的請求頭= "+headers);
            //得到服務器返回的信息
            var infor = objXMLHttp.responseText;
            alert("服務器端的響應 = "+infor);
        }else{
            alert("所請求的服務器端出了問題");
        }
    }
}

ontimeout
讓請求時長超過設定的時間時觸發此方法，可在此方法中關閉此次請求；

objXMLHttp.timeout = 5000;// 設定請求最大時長
objXMLHttp.ontimeout = function() {
    alert("請求超時！")
    objXMLHttp.abort();//關閉此次請求
}

onprogress
新版本的XMLHttpRequest(XMLHttpRequest2)對象，傳送數據的時候，有一個progress事件，用來返回進度信息。
它分成上傳和下載兩種情況。下載的progress事件屬于XMLHttpRequest對象，上傳的progress事件屬于XMLHttpRequest.upload對象。

// 定義一個共用方法
function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}
// 在兩個事件上都引用此方法
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

其中：
event.lengthComputable 長度可計算（true或false）
event.loaded 接收的字節數
event.total 總字節數

除了以上事件，XMLHttpRequest還有以下事件，可根據個人需要去實現對應的方法。

　　* load事件：傳輸成功完成。
　　* abort事件：傳輸被用戶取消。
　　* error事件：傳輸中出現錯誤。
　　* loadstart事件：傳輸開始。
　　* loadEnd事件：傳輸結束，但是不知道成功還是失敗。

除了上面的狀態和事件，XMLHttpRequest還有一些其他的屬性，用于配置或儲存數據。常用的有responseText、responseType、status等

responseType: 設置響應類型，告訴服務器你期望的響應格式（即返回的數據格式），默認為""代表字符串。可選參數："arraybuffer"、"blob"、"document"、"json"、"text"
response： 響應實體的類型由 responseType 來指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 對象 (即 "json")， 或者是字符串。如果請求未完成或失敗，則該值為 null
responseXML： 本次請求的響應是一個 Document 對象，如果是以下情況則值為 null：請求未成功，請求未發送，或響應無法被解析成 XML 或 HTML。當響應為text/xml 流時會被解析。當 responseType 設置為"document"，并且請求為異步的，則響應會被當做 text/html 流來解析
responseText：此次請求的響應為文本，或是當請求未成功或還未發送時為 null

status：該請求的響應狀態（200、404、500等，更多值可參考http://tools.jb51.net/table/h...）

statusText：該請求的響應狀態信息,包含一個狀態碼和原因短語 (例如 "200 OK")

timeout：超時毫秒數，同步請求不可用。默認是0，永不超時。在 open() 和 send() 之間設置，超時會觸發 xhr 的 timeout 事件

upload：只讀，ajax 上傳對象

withCredentials： Boolean，是否允許跨域響應設置cookie，默認是 false

初始化一個請求.此方法可以對需要請求的url進行初始化才操作，包括設置請求類型、請求連接、是否異步等

open()接收的參數

XMLHttpRequest.open(method,url,async,user,password);

method: 請求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下個參數是非HTTP(S)的URL,則忽略該參數.
url:該請求所要訪問的URL
async: 一個可選的布爾值參數，默認為true,意味著是否執行異步操作
user:用戶名,可選參數,為授權使用;默認參數為空string
password:密碼,可選參數,為授權使用;默認參數為空string

給指定的HTTP請求頭賦值.在這之前,你必須確認已經調用 open() 方法打開了一個url.

該方法接收兩個參數，一個是頭名稱一個是對應的值

//兩個參數均為字符串
XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312")

對應的headers有哪些可以查閱：

http://tools.jb51.net/table/h...

發送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應完全接受以后,該方法才會返回.

send()方法接收一個參數，表示請求發出時的請求體

XMLHttpRequest.send(data);

該參數也可以是一下幾種形式：ArrayBuffer、Blob 、Document 、DOMString、FormData。

如果請求已經被發送,則立刻中止請求，此方法多用于超時的請求情況，在請求已發送但還未完成的這段過程中都可以調用此方法

XMLHttpRequest.abort();

獲取XMLHttpRequest的對應傳入的響應頭，如果傳入的響應頭不存在或響應頭還沒被接受,則返回null。

XMLHttpRequest.getResponseHeader(ResponseHeaderKay);

返回所有響應頭信息(響應頭名和值), 如果響應頭還沒接受,則返回null

重寫由服務器返回的MIME type。這個可用于, 例如，強制把一個響應流當作“text/xml”來處理和解析,即使服務器沒有指明數據是這個類型。注意，這個方法必須在send()之前被調用。

XMLHttpRequest.overrideMimeType(DOMString mimetype);

step 1： 創建一個XMLHttpRequest對象

var objXMLHttp;
// 創建XMLHttpRequest對象
function createXMLHttpRequest(){
    //對于Firefox,Opera等遵守DOM 2規范的瀏覽器
    if(window.XMLHttpRequest){
        objXMLHttp = new XMLHttpRequest();
    }
    //對于IE瀏覽器
    else{
        //將IE瀏覽器不同的XMLHttp實現聲明為數組
        var MSXML = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        //依次對每個XMLHttp創建XMLHttpRequest對象
        for(var i = 0; n< MSXML.length; i++){
            try{
                //微軟發布的是ActiveX控件
                objXMLHttp = new ActiveXObject(MSXML[i]);
                //如果正常創建XMLHttpRequest對象就使用break跳出循環
                break;
            }catch(e){
                alert("創建XMLHttpRequest對象失敗");
            }
        }
    }    
}

step 2: 封裝一個POST請求方法

/**
 * 通過post方式提交
 * 接收三個參數，分別是請求路徑，請求體,是否異步
 * */
function postSend(url,data,async){
     // 默認async為true
     if(typeof async === "undefined") {
         async = true;
     }
    //調用剛才定義的方法，初始化XMLHttpRequest對象
    createXMLHttpRequest();
    //打開與服務器的連接，使用post方式
    objXMLHttp.open("POST", url, async);
    //post方式需要設置請求消息頭
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //設置處理響應的回調函數
    objXMLHttp.onreadystatechange = onChange;
    //發送請求并設置參數，參數的設置為param=value的形式
    objXMLHttp.send(data);
}

step 3： 封裝一個監聽請求狀態的方法

/**
 * 設定的回調函數
 * */
function onChange(){
    //響應完成且響應正常
    if(objXMLHttp.readyState == 1){
        alert("XMLHttpRequest對象開始發送請求");
    }else if(objXMLHttp.readyState == 2){
        alert("XMLHttpRequest對象的請求發送完成");
    }else if(objXMLHttp.readyState == 3){
        alert("XMLHttpRequest對象開始讀取服務器的響應");
    }else if(objXMLHttp.readyState == 4){
        alert("XMLHttpRequest對象讀取服務器響應結束");
        if(objXMLHttp.status == 200){
            //信息已經成功返回，開始處理信息
            //先捕獲下所有的請求頭
            var headers = objXMLHttp.getAllResponseHeaders();
            alert("所有的請求頭= "+headers);
            //得到服務器返回的信息
            var infor = objXMLHttp.responseText;
            alert("服務器端的響應 = "+infor);
        }else{
            alert("所請求的服務器端出了問題");
        }
    }
}

step 4: 調用Post請求

    var data = {
        id: "123456",
        name: "拉普拉斯的魔女"
    }
    Postsend("https://baidu.com/book/IT",data,true)；

參考：

http://www.cnblogs.com/shenli...
http://www.ruanyifeng.com/blo...
https://developer.mozilla.org...