JS之AJAX-進度事件

通常情況下，使用readystatechange事件監聽HTTP請求的完成。XHR2規範草案定義了進度事件Progress Events事件，XHR對象在請求的不同階段觸發不同類型的事件，是以不再需要檢測readyState屬性，該規範定義了用戶端與服務端通信的有關事件。這些事件最早其實隻針對XHR操作，但目前也被其他API(如File API)借鑒。

loadstart: 在接收到響應資料的第一個位元組時觸發

progress: 在接收到響應期間持續不斷的觸發

error： 在請求發生錯誤時觸發

abort： 在調用abort()方法終止連接配接使觸發

load: 在接收到完整的響應資料時觸發

loadend： 在通信完成，或者觸發error、abort、load事件時觸發

timeout： 在請求逾時使觸發

每個請求都從loadstart事件開始，接着每個50ms左右觸發一次progress事件，然後觸發error、abort、load或timeout事件中的一個，最後以觸發loadend事件結束

對于任何請求，浏覽器将隻會觸發error、abort、load或timeout事件中的一個。XHR2規範草案指出一旦這些事件中的一個發生後，浏覽器應該觸發loadend事件

注意： IE9-浏覽器不支援以上事件(IE9浏覽器僅支援load事件)

load事件會在響應接收完畢時觸發，是以不用再去檢查readyState屬性了。但是請求完成不代表請求成功，是以還會使用XHR對象的status屬性判斷是否請求成功

progress事件會在接收到響應期間持續不斷的觸發，觸發期間會接收到一個event對象，包含着四個屬性：target屬性是XHR對象、lengthComputable是一個表示進度資訊是否可用的布爾值、loaded表示已經接收的位元組數、total表示根據Content-Length響應頭部确定的預期位元組數。

下面是一個音樂檔案的加載過程示例

XHR2定義了XMLHttpRequest對象的upload屬性，用于監控HTTP請求的上傳事件。該屬性的屬性值是一個對象，它定義了addEventListener()方法和整個Progress Events事件集合

可以像使用progress事件處理程式一樣使用upload事件處理程式。對于XMLHttpRequest對象，設定XHR.onprogress可以監控響應的下載下傳進度，設定XHR.upload.onprogress可以監控請求的上傳進度

下面是一個上傳進度的示例

當HTTP請求無法完成時會有三種情況，對應三種不同的事件：

如果請求逾時，會觸發timeout事件

如果請求中止，會觸發abort事件

網絡錯誤會觸發error事件

調用abort()方法可以取消正在進行的HTTP請求，該方法一旦調用，會觸發abort事件。一個比較常見的應用場景，假如使用XMLHttpRequest為文本輸入域請求自動完成推薦，如果使用者在伺服器的建議達到之前輸入了新字元，這時等待請求不再有用，應該中止

XHR對象的timeout屬性等于一個整數，表示多少毫秒後，如果請求仍然沒有得到結果，就會自動終止并觸發timeout事件。該屬性預設等于0，表示沒有時間限制

部落格: https://blog.86886.wang

GitHub: https://github.com/wmui