(轉)Ajax_XMLHttpRequest Level 2

XMLHttpRequest 是一個瀏覽器接口，使得 Javascript 能夠進行 HTTP (S) 通訊。

　　最先，微軟在 IE 5 引進了這個接口。由於它太有用，其餘瀏覽器也模仿部署了，ajax 操做所以得以誕生。

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

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

　　1、老版本的 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：服務器返回的狀態文本。

　　2、老版本的缺點

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

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

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

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

　　3、新版本的功能

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

* 能夠設置 HTTP 請求的時限。

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

* 能夠上傳文件。

* 能夠請求不一樣域名下的數據（跨域請求）。

* 能夠獲取服務器端的二進制數據。

* 能夠得到數據傳輸的進度信息。

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

　　4、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 還不支持。

　　5、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);

　　6、上傳文件

　　新版 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);

　　7、跨域資源共享（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》。

　　8、接收二進制數據（方法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 區段。

　　8、接收二進制數據（方法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。

　　9、進度信息

　　新版本的 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 事件：傳輸結束，可是不知道成功仍是失敗。

　　10、閱讀材料

　　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 設置。