JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015-06-19 00:00
791 查看
////////////////////////////////////////////////////////////////// // options 是请求的选项 // // originalOptions 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值 // // jqXHR 是请求的jqXHR对象 // ////////////////////////////////////////////////////////////////// $.ajaxPrefilter("image", function(options, originalOptions, jqXHR) { //通过预处理器转化类型 if (options.test) { options.type = 'GET' } //增加前缀 options.url = "http://img.mukewang.com/" + options.url }); /////////////////////// // 请求分发器 transports // /////////////////////// $.ajaxTransport("image", function(s) { if (s.type === "GET" && s.async) { var image; return { send: function(_, callback) { image = new Image(); function done(status) { if (image) { var statusText = (status == 200) ? "success" : "error", tmp = image; image = image.onreadystatechange = image.onerror = image.onload = null; callback(status, statusText, { image: tmp }); } } image.onreadystatechange = image.onload = function() { done(200); }; image.onerror = function() { done(404); }; show(s.url) image.src = s.url; }, abort: function() { if (image) { image = image.onreadystatechange = image.onerror = image.onload = null; } } }; } }); $("#test").click(function(){ //执行一个异步的HTTP(Ajax)的请求。 var ajax = $.ajax({ test : true, //测试 url : '547d5a45000156f406000338-590-330.jpg', dataType : 'image', type : 'POST', data: { foo: ["bar1", "bar2"] }, //这个对象用于设置Ajax相关回调函数的上下文 context: document.body, //请求发送前的回调函数,用来修改请求发送前jqXHR beforeSend: function(xhr) { xhr.overrideMimeType("text/plain; charset=x-user-defined"); show('局部事件beforeSend') }, //请求完成后回调函数 (请求success 和 error之后均调用) complete: function() { show('局部事件complete') }, error: function() { show('局部事件error请求失败时调用此函数') }, success: function() { show('局部事件success') } }) ajax.done(function() { show('done') }).fail(function() { show('fail') }).always(function() { show('always') })
相关文章推荐
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- JQuery实现的图文自动轮播效果插件
- jquery实现的代替传统checkbox样式插件
- jquery gridster 拖拽功能 中文文档
- 使用jstl的Foreach 和jquery的each()的index属性
- 手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
- validate验证+jquery+ajax提交表单
- jquery easyui的dialog href的参数传递问题
- jquery easyui DataGrid 数据表格 属性
- jQuery + css 公告从左往右滚动
- 页面导航定位
- jQuery.ajax
- jQuery 开发之jQuery事件二
- jQuery easyui combotree
- jquery获取当前日期的方法
- Jquery ajax项目实例
- js onload()与jQuery ready()方法区别
- jQuery uploadify3.2 属性里没有cancelImg或cancelImage属性
- jQuery收藏链接
- jQuery 开发之jQuery事件一