> 웹 프론트엔드 > JS 튜토리얼 > JQuery_jquery에서 이미지의 ajaxPrefilter 및 ajaxTransport 처리를 시뮬레이션합니다.

JQuery_jquery에서 이미지의 ajaxPrefilter 및 ajaxTransport 처리를 시뮬레이션합니다.

WBOY
풀어 주다: 2016-05-16 15:54:02
원래의
1157명이 탐색했습니다.

//////////////////////////////////////////////////////////////////
  // 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')
    })
로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿