JQuery中模拟image的ajaxPrefilter与ajaxTransport处理


Posted in Javascript onJune 19, 2015

//////////////////////////////////////////////////////////////////
  // 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')
    })
Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
Javascript变量作用域详解
Dec 06 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
javascript常用的设计模式
Feb 09 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
c#程序员对TypeScript的认识过程
Jun 19 #Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 #Javascript
TypeScript 中接口详解
Jun 19 #Javascript
TypeScript 学习笔记之基本类型
Jun 19 #Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 #Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 #Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 #Javascript
You might like
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
js实现滚动条自动滚动
2020/12/13 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python面向对象之继承和多态用法分析
2019/06/08 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python GUI计算器的实现
2020/10/09 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
公司董事长岗位职责
2014/06/08 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
活动主持人开场白
2015/05/28 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Python之matplotlib绘制饼图
2022/04/13 Python