今天就跟大家聊聊有關(guān)如何使用ajax的進(jìn)度事件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)，品牌網(wǎng)站制作，一元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10余年的網(wǎng)站開(kāi)發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上千余家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

一般地，使用readystatechange事件探測(cè)HTTP請(qǐng)求的完成。XHR2規(guī)范草案定義了進(jìn)度事件Progress Events規(guī)范，XMLHttpRequest對(duì)象在請(qǐng)求的不同階段觸發(fā)不同類(lèi)型的事件，所以它不再需要檢査readyState屬性。這個(gè)草案定義了與客戶(hù)端服務(wù)器通信有關(guān)的事件。這些事件最早其實(shí)只針對(duì)XHR操作，但目前也被其他API(如File API)借鑒。本文將詳細(xì)介紹進(jìn)度事件

基礎(chǔ)

有以下6個(gè)進(jìn)度事件

loadstart:在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)

progress:在接收響應(yīng)期間持續(xù)不斷地觸

error:在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)

abort:在因?yàn)檎{(diào)用abort()方法而終止連接時(shí)觸發(fā)

load:在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)

loadend:在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)

timeout:超時(shí)發(fā)生時(shí)觸發(fā)

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

每個(gè)請(qǐng)求都從觸發(fā)loadstart事件開(kāi)始，接下來(lái)，通常每隔50毫秒左右觸發(fā)一次progress事件，然后觸發(fā)load、error、abort或timeout事件中的一個(gè)，最后以觸發(fā)loadend事件結(jié)束

對(duì)于任何具體請(qǐng)求，瀏覽器將只會(huì)觸發(fā)load、abort、timeout和error事件中的一個(gè)。XHR2規(guī)范草案指出一旦這些事件中的一個(gè)發(fā)生后，瀏覽器應(yīng)該觸發(fā)loadend事件

load
響應(yīng)接收完畢后將觸發(fā)load事件，因此也就沒(méi)有必要去檢查readyState屬性了。但一個(gè)完成的請(qǐng)求不一定是成功的請(qǐng)求，例如，load事件的處理程序應(yīng)該檢查XMLHttpRequest對(duì)象的status狀態(tài)碼來(lái)確定收到的是“200 OK”而不是“404 Not Found”的HTTP響應(yīng)

獲取信息

progress

progress事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會(huì)接收到一個(gè)event對(duì)象，其target屬性是XHR對(duì)象，但包含著三個(gè)額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個(gè)表示進(jìn)度信息是否可用的布爾值，loaded表示已經(jīng)接收的字節(jié)數(shù)，total表示根據(jù)Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。有了這些信息，就可以為用戶(hù)創(chuàng)建一個(gè)進(jìn)度指示器了

獲取信息

上傳進(jìn)度
除了為監(jiān)控HTTP響應(yīng)的加載定義的這些有用的事件外，XHR2也給出了用于監(jiān)控HTTP請(qǐng)求上傳的事件。在實(shí)現(xiàn)這些特性的瀏覽器中，XMLHttpRequest對(duì)象將有upload屬性。upload屬性值是一個(gè)對(duì)象，它定義了addEventListener()方法和整個(gè)progress事件集合，比如onprogress和onload(但upload對(duì)象沒(méi)有定義onreadystatechange屬性，upload僅能觸發(fā)新的事件類(lèi)型)

能僅僅像使用常見(jiàn)的progress事件處理程序一樣使用upload事件處理程序。對(duì)于XMLHttpRequest對(duì)象，設(shè)置XHR.onprogress以監(jiān)控響應(yīng)的下載進(jìn)度，并且設(shè)置XHR.upload.onprogress以監(jiān)控請(qǐng)求的上傳進(jìn)度

上傳文件

其他事件

HTTP請(qǐng)求無(wú)法完成有3種情況，對(duì)應(yīng)3種事件。如果請(qǐng)求超時(shí)，會(huì)觸發(fā)timeout事件。如果請(qǐng)求中止，會(huì)觸發(fā)abort事件。最后，像太多重定向這樣的網(wǎng)絡(luò)錯(cuò)誤會(huì)阻止請(qǐng)求完成，但這些情況發(fā)生時(shí)會(huì)觸發(fā)error事件

可以通過(guò)調(diào)用XMLHttpRequest對(duì)象的abort()方法來(lái)取消正在進(jìn)行的HTTP請(qǐng)求。調(diào)用abort()方法在這個(gè)對(duì)象上觸發(fā)abort事件

調(diào)用abort()的主要原因是完成取消或超時(shí)請(qǐng)求消耗的時(shí)間太長(zhǎng)或當(dāng)響應(yīng)變得無(wú)關(guān)時(shí)。假如使用XMLHttpRequest為文本輸入域請(qǐng)求自動(dòng)完成推薦。如果用戶(hù)在服務(wù)器的建議達(dá)到之前輸入了新字符，這時(shí)等待請(qǐng)求不再有用，應(yīng)該中止

XHR對(duì)象的timeout屬性等于一個(gè)整數(shù)，表示多少毫秒后，如果請(qǐng)求仍然沒(méi)有得到結(jié)果，就會(huì)自動(dòng)終止。該屬性默認(rèn)等于0，表示沒(méi)有時(shí)間限制

如果請(qǐng)求超時(shí)，將觸發(fā)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("請(qǐng)求結(jié)束");    
}

看完上述內(nèi)容，你們對(duì)如何使用ajax的進(jìn)度事件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。