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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
基于Vue实现拖拽功能
Jul 29 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
php 读取文件乱码问题
2010/02/20 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python 多线程Threading初学教程
2017/08/22 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
《一株紫丁香》教学反思
2014/02/19 职场文书
工作收入证明模板
2014/10/10 职场文书
财务人员入职担保书
2015/09/22 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技