您的位置:首頁>正文

深入理解ajax系列第五篇——進度事件

前面的話

一般地, 使用readystatechange事件探測HTTP請求的完成。 XHR2規範草案定義了進度事件Progress Events規範, XMLHttpRequest物件在請求的不同階段觸發不同類型的事件, 所以它不再需要檢査readyState屬性。 這個草案定義了與用戶端伺服器通信有關的事件。 這些事件最早其實只針對XHR操作, 但目前也被其他API(如File API)借鑒。 本文將詳細介紹進度事件

基礎

有以下6個進度事件

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

progress:在接收回應期間持續不斷地觸

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

abort:在因為調用abort方法而終止連接時觸發

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

loadend:在通信完成或者觸發error、abort或load事件後觸發

timeout:超時發生時觸發

[注意]IE9-流覽器不支持以上事件(IE9流覽器僅支持load事件)

每個請求都從觸發loadstart事件開始, 接下來, 通常每隔50毫秒左右觸發一次progress事件, 然後觸發load、error、abort或timeout事件中的一個, 最後以觸發loadend事件結束

對於任何具體請求, 流覽器將只會觸發load、abort、timeout和error事件中的一個。 XHR2規範草案指出一旦這些事件中的一個發生後, 流覽器應該觸發loadend事件

load

回應接收完畢後將觸發load事件, 因此也就沒有必要去檢查readyState屬性了。 但一個完成的請求不一定是成功的請求, 例如, load事件的處理常式應該檢查XMLHttpRequest物件的status狀態碼來確定收到的是“200 OK”而不是“404 Not Found”的HTTP回應

獲取資訊

progress

progress事件會在流覽器接收新資料期間週期性地觸發。 而onprogress事件處理常式會接收到一個event物件,

其target屬性是XHR物件, 但包含著三個額外的屬性:lengthComputable、loaded和total。 其中, lengthComputable是一個表示進度資訊是否可用的布林值, loaded表示已經接收的位元組數, total表示根據Content-Length回應頭部確定的預期位元組數。 有了這些資訊, 就可以為使用者創建一個進度指示器了

獲取資訊

上傳進度

除了為監控HTTP回應的載入定義的這些有用的事件外, XHR2也給出了用於監控HTTP請求上傳的事件。 在實現這些特性的流覽器中, XMLHttpRequest物件將有upload屬性。 upload屬性值是一個物件, 它定義了addEventListener方法和整個progress事件集合, 比如onprogress和onload(但upload物件沒有定義onreadystatechange屬性, upload僅能觸發新的事件類型)

上傳檔

其他事件

HTTP請求無法完成有3種情況, 對應3種事件。 如果請求超時, 會觸發timeout事件。 如果請求中止, 會觸發abort事件。 最後, 像太多重定向這樣的網路錯誤會阻止請求完成,

但這些情況發生時會觸發error事件

可以通過調用XMLHttpRequest物件的abort方法來取消正在進行的HTTP請求。 調用abort方法在這個物件上觸發abort事件

調用abort的主要原因是完成取消或超時請求消耗的時間太長或當回應變得無關時。 假如使用XMLHttpRequest為文本輸入域請求自動完成推薦。 如果用戶在伺服器的建議達到之前輸入了新字元, 這時等待請求不再有用, 應該中止

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

如果請求超時, 將觸發ontimeout事件

var xhr = new XMLHttpRequest; btn.onclick = function{ xhr.abort; }; xhr.ontimeout = function{ console.log('The request timed out.'); } xhr.timeout = 100; xhr.onabort = function{ console.log("The transfer has been canceled by the user."); } xhr.onerror = function{ console.log("An error occurred while transferring the file."); } xhr.onloadend = function{ console.log("請求結束"); }
同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示