XMLHttpRequest Level 2 使用指南

openkk 12年前發布 | 28K 次閱讀 Ajax Ajax框架

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

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

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

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

XMLHttpRequest Level 2 使用指南

一、老版本的 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 事件的回調函數。