|
这篇文章主要介绍了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')
})
| 
发表于 2018-12-25 05:24:19
