jquery xhr upload属性包装

用html5新的 XMLHttpRequest 和 File API,同时又用jquery。

新的xhr上,有个upload属性,可以在上面绑定progress监听。

而jquery包装后的xhr(这里指常规如complete,beforeSend回调中返回的xhr),是没有upload属性的

所以~~要利用jquery的api再包装下,两种方式:全局级别 or 请求级别

//全局级别
//重写(确切的说是扩展)xhr生成方法,
var oldXHR = jQuery.ajaxSettings.xhr; jQuery.ajaxSettings.xhr = function() { var xhr = oldXHR(); if(xhr instanceof window.XMLHttpRequest) { xhr.upload.addEventListener('progress', on_progress, false); xhr.upload.addEventListener('load', on_loaded, false); xhr.addEventListener('abort', on_abort, false); } return xhr; };

  

//请求级别
//利用$.ajax的参数xhr
$.ajax({ xhr: function() { var xhr = jQuery.ajaxSettings.xhr(); if(xhr instanceof window.XMLHttpRequest) { xhr.upload.addEventListener('progress', on_progress, false); xhr.upload.addEventListener('load', on_loaded, false); xhr.addEventListener('abort', on_abort, false); } return xhr; } });

这里只对$.ajax中的xhr对象做了upload属性的包装,其实可以利用$.ajaxSetup,完成对全局$.ajax默认参数的设定

比如$.ajaxSetup({"type" : 'POST'}),默认的ajax就都是post啦~

不得不说,jquery的api,太人性化了~~

 

参考:http://stackoverflow.com/questions/4915671/how-to-get-pure-xmlhttprequest-object-in-jquery-1-5?lq=1

posted @ 2013-05-27 15:04  王冶soda  阅读(2259)  评论(0编辑  收藏  举报