jQueryAjax中的事件詳細介紹_jquery

Ajax會觸發(fā)很多事件。
有兩種事件，一種是局部事件，一種是全局事件：
局部事件：通過$.ajax來調(diào)用并且分配。
代碼如下:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件，可以用bind來綁定，用unbind來取消綁定。這個跟click/mousedown/keyup等事件類似。但他可以傳遞到每一個DOM元素上。
代碼如下:
$("#loading").bind("ajaxSend", function(){ //使用bind
$(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
$(this).hide();
});

當然，你某一個Ajax請求不希望產(chǎn)生全局的事件，則可以設置global:false
代碼如下:
$.ajax({
url: "test.html",
global: false,
// ...
});

事件的順序如下：

ajaxStart 全局事件
開始新的Ajax請求，并且此時沒有其他ajax請求正在進行。
beforeSend 局部事件
當一個Ajax請求開始時觸發(fā)。如果需要，你可以在這里設置XHR對象。
ajaxSend 全局事件
請求開始前觸發(fā)的全局事件
success 局部事件
請求成功時觸發(fā)。即服務器沒有返回錯誤，返回的數(shù)據(jù)也沒有錯誤。
ajaxSuccess 全局事件
全局的請求成功
error 局部事件
僅當發(fā)生錯誤時觸發(fā)。你無法同時執(zhí)行success和error兩個回調(diào)函數(shù)。
ajaxError 全局事件
全局的發(fā)生錯誤時觸發(fā)
complete 局部事件
不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發(fā)這個事件。
ajaxComplete 全局事件
全局的請求完成時觸發(fā)
ajaxStop 全局事件
當沒有Ajax正在進行中的時候，觸發(fā)。

局部事件回調(diào)的參數(shù)在文檔中寫的很清楚了，這里就不累述了。

全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3個參數(shù)
event, XMLHttpRequest, ajaxOptions
第一個是事件，第二個是XHR對象，第三個參數(shù)最有用，是當時調(diào)用這個ajax的時候的參數(shù)。
對于ajaxError,還有第四個參數(shù)thrownError，只有當異常發(fā)生時才會被傳遞。
我們可以利用ajaxOptions來寫一個全局的ajax事件。
比如
代碼如下:
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在請求"+o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url+"請求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url+"請求失敗");
});

對于這個例子，
這樣我們就可以很方便的全局地在某個地方顯示當前的ajax狀態(tài)。
當然，之前說了，第三個參數(shù)實際上是傳遞給ajax的參數(shù)。get/post/load/getScript/getJSON等方法本質(zhì)上都是調(diào)用ajax方法的，所以ajaxOptions.url屬性總是有效的。

還有更豐富的例子。
如果你用ajax調(diào)用，還可以傳遞自定義參數(shù)。下面的例子我就自定義了一個msg參數(shù)給了ajax調(diào)用
代碼如下:
//自定義參數(shù)msg
$.ajax({url:"test1.html",type:"get",msg:"頁面一"});
$.ajax({url:"test2.html",type:"get",msg:"頁面二"});
$.ajax({url:"test3.html",type:"get",msg:"頁面三"});
$.ajax({url:"test4.html",type:"get",msg:"頁面四"});

//這里就能獲取到自定義參數(shù)msg。
//這可以用來區(qū)別對待不同的ajax請求。
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在請求"+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg+"請求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg+"請求失敗");
});

最后對于load方法，還有話說。

其他的簡易ajax方法，比如get,post,getJSON等，他們的回調(diào)函數(shù)都是設置了success回調(diào)。

而只有l(wèi)oad設置的其實是complete回調(diào)。

所以，load里設置的回調(diào)函數(shù)的參數(shù)應該有2個。

XMLHttpRequest和textStatus
但實際上也并非如此。
load的回調(diào)有三個參數(shù)
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
所以，你可以在load的回調(diào)里
通過textStatus==”success”或者textStatus==”error”來判斷是否調(diào)用成功。
或者用XMLHttpRequest.status屬性判斷是200還是404或者其他的。

這點上，我認為比普通的get/post等方法更先進。如果要單數(shù)設置每get的error是不可能的。但是設置一個全局的ajaxError其實也是不錯的選擇。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com