XMLHttpRequest 是一個瀏覽器接口，使得 Javascript 可以進行 HTTP (S) 通信。

　　最早，微軟在 IE 5 引進了這個接口。因為它太有用，其他瀏覽器也模仿部署了，ajax 操作因此得以誕生。

　　但是，這個接口一直沒有標準化，每家瀏覽器的實現或多或少有點不同。HTML 5 的概念形成后，W3C 開始考慮標準化這個接口。2008年 2 月，就提出了 XMLHttpRequest Level 2 草案。

　　這個 XMLHttpRequest 的新版本，提出了很多有用的新功能，將大大推動互聯網革新。本文就對這個新版本進行詳細介紹。

　　一、老版本的 XMLHttpRequest 對象

　　在介紹新版本之前，我們先回顧一下老版本的用法。

　　首先，新建一個 XMLHttpRequest 的實例。

var xhr = new XMLHttpRequest ();

　　然后，向遠程主機發出一個 HTTP 請求。

xhr.open ('GET'， 'example.php');
xhr.send ();

　　接著，就等待遠程主機做出回應。這時需要監控 XMLHttpRequest 對象的狀態變化，指定回調函數。

xhr.onreadystatechange = function (){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
        alert ( xhr.responseText );
    } else {
        alert ( xhr.statusText );
    }
};

　　上面的代碼包含了老版本 XMLHttpRequest 對象的主要屬性：

* xhr.readyState：XMLHttpRequest 對象的狀態，等于 4 表示數據已經接收完畢。

* xhr.status：服務器返回的狀態碼，等于 200 表示一切正常。

* xhr.responseText：服務器返回的文本數據

* xhr.responseXML：服務器返回的 XML 格式的數據

* xhr.statusText：服務器返回的狀態文本。

　　二、老版本的缺點

　　老版本的 XMLHttpRequest 對象有以下幾個缺點：

* 只支持文本數據的傳送，無法用來讀取和上傳二進制文件。

* 傳送和接收數據時，沒有進度信息，只能提示有沒有完成。

* 受到"同域限制"（Same Origin Policy），只能向同一域名的服務器請求數據。

　　三、新版本的功能

　　新版本的 XMLHttpRequest 對象，針對老版本的缺點，做出了大幅改進。

* 可以設置 HTTP 請求的時限。

* 可以使用 FormData 對象管理表單數據。

* 可以上傳文件。

* 可以請求不同域名下的數據（跨域請求）。

* 可以獲取服務器端的二進制數據。

* 可以獲得數據傳輸的進度信息。

　　下面，我就一一介紹這些新功能。

　　四、HTTP 請求的時限

　　有時，ajax 操作很耗時，而且無法預知要花多少時間。如果網速很慢，用戶可能要等很久。

　　新版本的 XMLHttpRequest 對象，增加了 timeout 屬性，可以設置 HTTP 請求的時限。

xhr.timeout = 3000;

　　上面的語句，將最長等待時間設為 3000 毫秒。過了這個時限，就自動停止 HTTP 請求。與之配套的還有一個 timeout 事件，用來指定回調函數。

xhr.ontimeout = function (event){
    alert ('請求超時！');
}

　　目前，Opera、Firefox 和 IE 10 支持該屬性，IE 8 和 IE 9 的這個屬性屬于 XDomainRequest 對象，而 Chrome 和 Safari 還不支持。

　　五、FormData 對象

　　ajax 操作往往用來傳遞表單數據。為了方便表單處理，HTML 5 新增了一個 FormData 對象，可以模擬表單。

　　首先，新建一個 FormData 對象。

var formData = new FormData ();

　　然后，為它添加表單項。

formData.append ('username'， '張三');
formData.append ('id'， 123456);

　　最后，直接傳送這個 FormData 對象。這與提交網頁表單的效果，完全一樣。

xhr.send (formData);

　　FormData 對象也可以用來獲取網頁表單的值。

var form = document.getElementById ('myform');
var formData = new FormData (form);
formData.append ('secret'， '123456'); // 添加一個表單項
xhr.open ('POST'， form.action);
xhr.send (formData);

　　六、上傳文件

　　新版 XMLHttpRequest 對象，不僅可以發送文本信息，還可以上傳文件。

　　假定 files 是一個"選擇文件"的表單元素（input[type="file"]），我們將它裝入 FormData 對象。

var formData = new FormData ();
for (var i = 0; i < files.length;i++) {
    formData.append ('files[]'， files[i]);
}

　　然后，發送這個 FormData 對象。

xhr.send (formData);

　　七、跨域資源共享（CORS）

　　新版本的 XMLHttpRequest 對象，可以向不同域名的服務器發出 HTTP 請求。這叫做"跨域資源共享"（Cross-origin resource sharing，簡稱 CORS）。

　　使用"跨域資源共享"的前提，是瀏覽器必須支持這個功能，而且服務器端必須同意這種"跨域"。如果能夠滿足上面的條件，則代碼的寫法與不跨域的請求完全一樣。

xhr.open ('GET'， 'http://other.server/and/path/to/script');

　　目前，除了 IE 8 和 IE 9，主流瀏覽器都支持 CORS，IE 10 也將支持這個功能。服務器端的設置，請參考《Server-Side Access Control》。

　　八、接收二進制數據（方法A：改寫 MIMEType）

　　老版本的 XMLHttpRequest 對象，只能從服務器取回文本數據（否則它的名字就不用 XML 起首了），新版則可以取回二進制數據。

　　這里又分成兩種做法。較老的做法是改寫數據的 MIMEType，將服務器返回的二進制數據偽裝成文本數據，并且告訴瀏覽器這是用戶自定義的字符集。

xhr.overrideMimeType ("text/plain; charset=x-user-defined");

　　然后，用 responseText 屬性接收服務器返回的二進制數據。

var binStr = xhr.responseText;

　　由于這時，瀏覽器把它當做文本數據，所以還必須再一個個字節地還原成二進制數據。

for (var i = 0, len = binStr.length; i < len; ++i) {
    var c = binStr.charCodeAt (i);
    var byte = c & 0xff;
}

　　最后一行的位運算"c & 0xff"，表示在每個字符的兩個字節之中，只保留后一個字節，將前一個字節扔掉。原因是瀏覽器解讀字符的時候，會把字符自動解讀成 Unicode 的 0xF700-0xF7ff 區段。

　　八、接收二進制數據（方法B：responseType 屬性）

　　從服務器取回二進制數據，較新的方法是使用新增的 responseType 屬性。如果服務器返回文本數據，這個屬性的值是"TEXT"，這是默認值。較新的瀏覽器還支持其他值，也就是說，可以接收其他格式的數據。

　　你可以把 responseType 設為 blob，表示服務器傳回的是二進制對象。

var xhr = new XMLHttpRequest ();
xhr.open ('GET'， '/path/to/image.png');
xhr.responseType = 'blob';

　　接收數據的時候，用瀏覽器自帶的 Blob 對象即可。

var blob = new Blob ([xhr.response], {type: 'image/png'});

　　注意，是讀取 xhr.response，而不是 xhr.responseText。

　　你還可以將 responseType 設為 arraybuffer，把二進制數據裝在一個數組里。

var xhr = new XMLHttpRequest ();
xhr.open ('GET'， '/path/to/image.png');
xhr.responseType = "arraybuffer";

　　接收數據的時候，需要遍歷這個數組。

var arrayBuffer = xhr.response;
if (arrayBuffer) {
    var byteArray = new Uint8Array (arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
        // do something
    }
}

　　更詳細的討論，請看 Sending and Receiving Binary Data。

　　九、進度信息

　　新版本的 XMLHttpRequest 對象，傳送數據的時候，有一個 progress 事件，用來返回進度信息。

　　它分成上傳和下載兩種情況。下載的 progress 事件屬于 XMLHttpRequest 對象，上傳的 progress 事件屬于 XMLHttpRequest.upload 對象。

　　我們先定義 progress 事件的回調函數。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

　　然后，在回調函數里面，使用這個事件的一些屬性。

function updateProgress (event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
    }
}

　　上面的代碼中，event.total 是需要傳輸的總字節，event.loaded 是已經傳輸的字節。如果 event.lengthComputable 不為真，則 event.total 等于0。

　　與 progress 事件相關的，還有其他五個事件，可以分別指定回調函數：

* load 事件：傳輸成功完成。

* abort 事件：傳輸被用戶取消。

* error 事件：傳輸中出現錯誤。

* loadstart 事件：傳輸開始。

* loadEnd 事件：傳輸結束，但是不知道成功還是失敗。

　　十、閱讀材料

　　1. Introduction to XMLHttpRequest Level 2： 新功能的綜合介紹。

　　2. New Tricks in XMLHttpRequest 2：一些用法的介紹。

　　3. Using XMLHttpRequest：一些高級用法，主要針對 Firefox 瀏覽器。

　　4. HTTP Access Control：CORS 綜述。

　　5. DOM access control using cross-origin resource sharing：CORS 的 9 種 HTTP 頭信息

　　6. Server-Side Access Control：服務器端 CORS 設置。

　　7. Enable CORS：服務端 CORS 設置。