老版本

• 首先，新建一個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 );
    　　　　}
    　　};
 

• 老版本對應的主要屬性：

    　　* xhr.readyState：XMLHttpRequest物件的狀態，等於4表示資料已經接收完畢。

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

    　　* xhr.responseText：伺服器返回的文字資料

    　　* xhr.responseXML：伺服器返回的XML格式的資料

    　　* xhr.statusText：伺服器返回的狀態文字。

新版本

• 可以設定HTTP請求的時限。
• 可以使用FormData物件管理表單資料。
• 可以上傳檔案。
• 可以請求不同域名下的資料（跨域請求）。
• 可以獲取伺服器端的二進位制資料。
• 可以獲得資料傳輸的進度資訊。

1. 增加了timeout屬性，可以設定HTTP請求的時限

xhr.timeout = 3000;

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

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

2. 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);

3. 上傳檔案

• 假定files是一個"選擇檔案"的表單元素（input[type=“file”]），我們將它裝入FormData物件

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

• 然後，傳送這個FormData物件

4. 跨域資源共享（CORS）

5. 接收二進位制資料

• 使用新增的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
    　　　　}
    　　}

6. 進度資訊

• 有一個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事件：傳輸結束，但是不知道成功還是失敗。