JQuery中模拟image的ajaxPrefilter与ajaxTransport处理

//////////////////////////////////////////////////////////////////
  // 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')
    })
(0)

相关推荐

  • 浅谈jQuery中ajaxPrefilter的应用

    jQuery的定义了一个ajax过滤器ajaxPrefilter,通过该过滤器可以过滤通过jQuery相应的ajax函数发送的ajax请求. 在项目中,很多地方存在指定开始时间.结束时间来获取该时间区间内某些值随时间变化的过程线的需求,我们可以定义一个通用的ajaxPrefilter来过滤所有ajax请求,当开始时间超过结束时间的时候,便将该ajax请求abort. $.ajaxPrefilter(function (options, originalOptions, jqXHR) { //tm

  • JQuery中模拟image的ajaxPrefilter与ajaxTransport处理

    ////////////////////////////////////////////////////////////////// // options 是请求的选项 // // originalOptions 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值 // // jqXHR 是请求的jqXHR对象 // ////////////////////////////////////////////////////////////////// $.aj

  • 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom

  • jquery中的事件处理详细介绍

    1.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了. ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数.这个方法可以看作是对window.onload注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行. ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Functio

  • jQuery中值得注意的trigger方法浅析

    介绍 trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数. 常用模拟 有时,不需要进行操作,也想模拟用户操作达到某些效果.比如在用户进入界面后就触发click事件,而不需要用户去点击. 在jquery中可以使用trigger完成. $("#btn").trigger("click")//触发id为b

  • jquery中的常用事件bind、hover、toggle等示例介绍

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

  • 实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

  • jQuery中使用了document和window哪些属性和方法小结

    document.activeElement获取文档当前获得焦点的元素 document.head在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ,可见并非所有浏览器支持 document.body获得当前文档的HTMLBodyElement元素 document.compatMode 获取当前文档的渲染方式.返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式).

  • 详解jQuery中的事件

    大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完

  • Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊.下面本文将给大家详细介绍这四个方法之间的区别,分别对每个方法都进行了详细的介绍,话不多说,来一起看看详细的介绍: 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使用的样本. <ul id="members" data-role=&

随机推荐