JQuery中模拟image的ajaxPrefilter与ajaxTransport处理

前端之家收集整理的这篇文章主要介绍了JQuery中模拟image的ajaxPrefilter与ajaxTransport处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

方法未经修改的选项,因此,没有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相关回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的上下文
  context: document.body,//请求发送前的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>,用来<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>请求发送前jqXHR
  beforeSend: function(xhr) {
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    show('局部事件beforeSend')
  },//请求完成后回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a> (请求success 和 error之后均<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>)
  complete: function() {
    show('局部事件complete')
  },error: function() {
    show('局部事件error请求失败时<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>此<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>')
  },success: function() {
    show('局部事件success')
  }
})

ajax.done(function() {
  show('done')
}).fail(function() {
  show('fail')
}).always(function() {
  show('always')
})</pre>

原文链接:https://www.f2er.com/ajax/53759.html

猜你在找的Ajax相关文章