JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
更新時間:2015年06月19日 09:15:34 投稿:junjie
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下
//////////////////////////////////////////////////////////////////
// options 是請求的選項 //
// originalOptions 值作為提供給Ajax方法未經(jīng)修改的選項,因此,沒有ajaxSettings設(shè)置中的默認(rèn)值 //
// jqXHR 是請求的jqXHR對象 //
//////////////////////////////////////////////////////////////////
$.ajaxPrefilter("image", function(options, originalOptions, jqXHR) {
//通過預(yù)處理器轉(zhuǎn)化類型
if (options.test) {
options.type = 'GET'
}
//增加前綴
options.url = "http://img.mukewang.com/" + options.url
});
///////////////////////
// 請求分發(fā)器 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(){
//執(zhí)行一個異步的HTTP(Ajax)的請求。
var ajax = $.ajax({
test : true, //測試
url : '547d5a45000156f406000338-590-330.jpg',
dataType : 'image',
type : 'POST',
data: {
foo: ["bar1", "bar2"]
},
//這個對象用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文
context: document.body,
//請求發(fā)送前的回調(diào)函數(shù),用來修改請求發(fā)送前jqXHR
beforeSend: function(xhr) {
xhr.overrideMimeType("text/plain; charset=x-user-defined");
show('局部事件beforeSend')
},
//請求完成后回調(diào)函數(shù) (請求success 和 error之后均調(diào)用)
complete: function() {
show('局部事件complete')
},
error: function() {
show('局部事件error請求失敗時調(diào)用此函數(shù)')
},
success: function() {
show('局部事件success')
}
})
ajax.done(function() {
show('done')
}).fail(function() {
show('fail')
}).always(function() {
show('always')
})
您可能感興趣的文章:
相關(guān)文章
jquery下利用jsonp跨域訪問實(shí)現(xiàn)方法
客戶端的跨域訪問,可以通過jsonp方式來實(shí)現(xiàn),jquery提供了跨域訪問的方法,jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。2010-07-07
jQuery刪除節(jié)點(diǎn)用法示例(remove方法)
這篇文章主要介紹了jQuery刪除節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了remove方法進(jìn)行頁面元素刪除的相關(guān)使用技巧,需要的朋友可以參考下2016-09-09
JavaScript對象之間的轉(zhuǎn)換 jQuery對象和原聲DOM
jQuery對象和原聲DOM,JavaScript對象之間的轉(zhuǎn)換,學(xué)習(xí)jquery的朋友可以參考下。2011-03-03
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08
jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
這篇文章主要介紹了通過jQuery實(shí)現(xiàn)的頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部,需要的朋友可以參考下2014-06-06

