【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请求的时候,可以根据需要触发不同类型的事件.