jq ajax完成事件,[jquery]为jQuery.ajax添加onprogress事件

原理：

给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

var xhr = new XMLHttpRequest();  xhr.upload.onprogress = function(e) {}

因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法

所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现

首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

var xhrOnProgress=function(fun) {

xhrOnProgress.onprogress = fun; //绑定监听

//使用闭包实现监听绑

return function() {

//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象

var xhr = $.ajaxSettings.xhr();

//判断监听函数是否为函数

if (typeof xhrOnProgress.onprogress !== 'function')

return xhr;

//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去

if (xhrOnProgress.onprogress && xhr.upload) {

xhr.upload.onprogress = xhrOnProgress.onprogress;

}

return xhr;

}

}

上传时使用$.ajax方法

var formData = new FormData(document.forms[0]);

$.ajax({

url : url,

type : 'POST',

data : formData,

//不处理表单数据

processData : false,

//不处理contentType

contentType : false,

beforeSend:function(){

console.log("start transfer");

},

success : function(responseStr) {

console.log(responseStr);

},

error : function(responseStr) {

console.log("error");

},

//用自定义的xhr代替jquery的xhr

xhr:xhrOnProgress(function(e){

var percent=e.loaded / e.total;//计算百分比

})

});