【javascript】腳本操作HTTP請求技術Ajax-4 (進度事件)

之前我們介紹瞭如何使用ajax進行上傳文件,如果文件十分打的情況下,那麼上傳一個文件的事件長度就會拉長,一般情況下都存在一些進度條提示的功能.而這個進度條是如何跟蹤我們上傳的進度，這都歸功於XHR2 的規範,定義了許多在請求的不同的截斷觸發不同類類型的事件.
接下來我們來介紹一下涉及到進度的事件.
1. onprogress 事件 當請求開始時,每過50ms就會觸發該事件
2. onload 事件 事件完成後觸發該事件
onprogress事件觸發後的事件對象擁有3個比較有用的屬性。這三個屬性就是來判斷當前請求進度的過程。lengthComputable表示是否知道請求內容長度,如果爲true表示知道,false表示不知道。loaded屬性表示目前傳輸的字節數值,total表示“Content-Length”即數據的整體長度。
接下來我們可以爲上一個文件上傳的例子進行一下修改,來監控文件上傳的進度。

/** 
*文件表單上傳  添加上傳進度事件
* 
*@param  {String}    url 
*@param  {FormData}  form 
*@param  {Function}  callback 
*/  
function formData(url,form,callback){  

    var xhr = createXHR();  
    xhr.open("POST",url);  
    xhr.upload.onprogress = function(e){
        if(e.lengthComputable){  //知道內容長度
         //顯示當前進度
         console.log(Math.round(100*e.loaded/e.total)+"%");
        }
    };
    //請求完成
    xhr.upload.onload = function(e){
    if(xhr.status == 200 ){  //請求正常
       console.log("upload 100%");
       callback(xhr);   //執行回調函數
     }
    };
    xhr.send(form);  
}  

有了這幾個新增的事件後,我們不需要通過觀察readyState的變化來判斷請求是否完成。這個例子表示監控一個文件上傳的進度,其中xhr.upload表示的是一個上傳的對象。如果我們要監控下載進度,則只需要在xhr對象註冊onprogress或者onload事件，代碼如下所示:

xhr.onprogress = function(e){
    //執行代碼
}
xhr.onload =function(e){
    //執行代碼
}

當我們需要中斷一個請求的時候,可以通過調用abort()函數來終止。

xhr.abort(); //中斷操作

我們可以在一個超時的請求中,通過調用abort(),來中斷無用的請求。我們再對第一段代碼進行修改。

/** 
*文件表單上傳  添加上傳進度事件
* 
*@param  {String}    url 
*@param  {FormData}  form 
*@param  {Function}  callback 
*/  
function formData(url,form,callback){  
    var timeout = 30000; //代表30秒
    var timedout =false;
    var xhr = createXHR();  
    xhr.open("POST",url);  
    xhr.upload.onprogress = function(e){
        if(e.lengthComputable){  //知道內容長度
         //顯示當前進度
         console.log(Math.round(100*e.loaded/e.total)+"%");
        }
    };
    //請求完成
    xhr.upload.onload = function(e){
     clearTimeout(timer); //清空定時器
    if(timedout){
        console.log('超時');
        return ;
    }
    if(xhr.status == 200 ){  //請求正常
       console.log("upload 100%");
       callback(xhr);   //執行回調函數
     }
    };
    var timer = setTimeout(function(){
        timedout = true;
        xhr.abort(); //中斷請求
    },timeout);

    xhr.send(form);  
}  

關於XHR2的特性就介紹到這裏,我們在進行Ajax請求的時候,可以根據需要觸發不同類型的事件.