jQuery Ajax中的事件詳細(xì)介紹
Ajax會(huì)觸發(fā)很多事件。
有兩種事件,一種是局部事件,一種是全局事件:
局部事件:通過(guò)$.ajax來(lái)調(diào)用并且分配。
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
全局事件,可以用bind來(lái)綁定,用unbind來(lái)取消綁定。這個(gè)跟click/mousedown/keyup等事件類似。但他可以傳遞到每一個(gè)DOM元素上。
$("#loading").bind("ajaxSend", function(){ //使用bind
$(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
$(this).hide();
});
當(dāng)然,你某一個(gè)Ajax請(qǐng)求不希望產(chǎn)生全局的事件,則可以設(shè)置global:false
$.ajax({
url: "test.html",
global: false,
// ...
});
事件的順序如下:
ajaxStart 全局事件
開(kāi)始新的Ajax請(qǐng)求,并且此時(shí)沒(méi)有其他ajax請(qǐng)求正在進(jìn)行。
beforeSend 局部事件
當(dāng)一個(gè)Ajax請(qǐng)求開(kāi)始時(shí)觸發(fā)。如果需要,你可以在這里設(shè)置XHR對(duì)象。
ajaxSend 全局事件
請(qǐng)求開(kāi)始前觸發(fā)的全局事件
success 局部事件
請(qǐng)求成功時(shí)觸發(fā)。即服務(wù)器沒(méi)有返回錯(cuò)誤,返回的數(shù)據(jù)也沒(méi)有錯(cuò)誤。
ajaxSuccess 全局事件
全局的請(qǐng)求成功
error 局部事件
僅當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)。你無(wú)法同時(shí)執(zhí)行success和error兩個(gè)回調(diào)函數(shù)。
ajaxError 全局事件
全局的發(fā)生錯(cuò)誤時(shí)觸發(fā)
complete 局部事件
不管你請(qǐng)求成功還是失敗,即便是同步請(qǐng)求,你都能在請(qǐng)求完成時(shí)觸發(fā)這個(gè)事件。
ajaxComplete 全局事件
全局的請(qǐng)求完成時(shí)觸發(fā)
ajaxStop 全局事件
當(dāng)沒(méi)有Ajax正在進(jìn)行中的時(shí)候,觸發(fā)。
局部事件回調(diào)的參數(shù)在文檔中寫的很清楚了,這里就不累述了。
全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3個(gè)參數(shù)
event, XMLHttpRequest, ajaxOptions
第一個(gè)是事件,第二個(gè)是XHR對(duì)象,第三個(gè)參數(shù)最有用,是當(dāng)時(shí)調(diào)用這個(gè)ajax的時(shí)候的參數(shù)。
對(duì)于ajaxError,還有第四個(gè)參數(shù)thrownError,只有當(dāng)異常發(fā)生時(shí)才會(huì)被傳遞。
我們可以利用ajaxOptions來(lái)寫一個(gè)全局的ajax事件。
比如
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在請(qǐng)求"+o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url+"請(qǐng)求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url+"請(qǐng)求失敗");
});
對(duì)于這個(gè)例子,
這樣我們就可以很方便的全局地在某個(gè)地方顯示當(dāng)前的ajax狀態(tài)。
當(dāng)然,之前說(shuō)了,第三個(gè)參數(shù)實(shí)際上是傳遞給ajax的參數(shù)。get/post/load/getScript/getJSON等方法本質(zhì)上都是調(diào)用ajax方法的,所以ajaxOptions.url屬性總是有效的。
還有更豐富的例子。
如果你用ajax調(diào)用,還可以傳遞自定義參數(shù)。下面的例子我就自定義了一個(gè)msg參數(shù)給了ajax調(diào)用
//自定義參數(shù)msg
$.ajax({url:"test1.html",type:"get",msg:"頁(yè)面一"});
$.ajax({url:"test2.html",type:"get",msg:"頁(yè)面二"});
$.ajax({url:"test3.html",type:"get",msg:"頁(yè)面三"});
$.ajax({url:"test4.html",type:"get",msg:"頁(yè)面四"});
//這里就能獲取到自定義參數(shù)msg。
//這可以用來(lái)區(qū)別對(duì)待不同的ajax請(qǐng)求。
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在請(qǐng)求"+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg+"請(qǐng)求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg+"請(qǐng)求失敗");
});
最后對(duì)于load方法,還有話說(shuō)。
其他的簡(jiǎn)易ajax方法,比如get,post,getJSON等,他們的回調(diào)函數(shù)都是設(shè)置了success回調(diào)。
而只有l(wèi)oad設(shè)置的其實(shí)是complete回調(diào)。
所以,load里設(shè)置的回調(diào)函數(shù)的參數(shù)應(yīng)該有2個(gè)。
XMLHttpRequest和textStatus
但實(shí)際上也并非如此。
load的回調(diào)有三個(gè)參數(shù)
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
所以,你可以在load的回調(diào)里
通過(guò)textStatus==”success”或者textStatus==”error”來(lái)判斷是否調(diào)用成功。
或者用XMLHttpRequest.status屬性判斷是200還是404或者其他的。
這點(diǎn)上,我認(rèn)為比普通的get/post等方法更先進(jìn)。如果要單數(shù)設(shè)置每get的error是不可能的。但是設(shè)置一個(gè)全局的ajaxError其實(shí)也是不錯(cuò)的選擇。
相關(guān)文章
jQuery lazyload 的重復(fù)加載錯(cuò)誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件,原意是按需加載,當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)進(jìn)行加載,但是官方的插件經(jīng)過(guò)firebug的檢測(cè)可知,并不能節(jié)省流量開(kāi)支,反而有重復(fù)加載的現(xiàn)象。2010-11-11jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果,涉及jQuery事件響應(yīng)及動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02jQuery Easyui加載表格出錯(cuò)時(shí)在表格中間顯示自定義的提示內(nèi)容
這篇文章主要介紹了jQuery Easyui加載表格出錯(cuò)時(shí)在表格中間顯示自定義的提示內(nèi)容的相關(guān)資料,需要的朋友可以參考下2016-12-12jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法,實(shí)例分析了jquery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)添加樣式的相關(guān)技巧,需要的朋友可以參考下2015-08-08jQuery刪除/清空指定元素的所有子節(jié)點(diǎn)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07基于jQuery實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果
Jq數(shù)據(jù)列表動(dòng)態(tài)效果,動(dòng)態(tài)更新,支持Ajax動(dòng)態(tài)刷新。下面小編給大家介紹下基于jQuery實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果,需要的朋友可以參考下2015-08-08Jquery通過(guò)JSON字符串創(chuàng)建JSON對(duì)象
這篇文章主要介紹了Jquery如何通過(guò)JSON字符串創(chuàng)建JSON對(duì)象,并附詳細(xì)示例,需要的朋友可以參考下2014-08-08