話說jquery的ajax事件

2022-09-15 16:39:16 字數 2341 閱讀 3709

ajax會觸發很多事件。

有兩種事件,一種是區域性事件,一種是全域性事件:

區域性事件:通過$.ajax來呼叫並且分配。

$.ajax(,

complete: function()

// ...

});

全域性事件,可以用bind來繫結,用unbind來取消繫結。這個跟click/mousedown/keyup等事件類似。但他可以傳遞到每乙個dom元素上。

$("#loading").bind("ajaxsend", function()).ajaxcomplete(function());

當然,你某乙個ajax請求不希望產生全域性的事件,則可以設定global:false

$.ajax();

事件的順序如下:

ajaxstart 全域性事件

開始新的ajax請求,並且此時沒有其他ajax請求正在進行。

beforesend 區域性事件

當乙個ajax請求開始時觸發。如果需要,你可以在這裡設定xhr物件。

ajaxsend 全域性事件

請求開始前觸發的全域性事件

success 區域性事件

請求成功時觸發。即伺服器沒有返回錯誤,返回的資料也沒有錯誤。

ajaxsuccess 全域性事件

全域性的請求成功

error 區域性事件

僅當發生錯誤時觸發。你無法同時執行success和error兩個**函式。

ajaxerror 全域性事件

全域性的發生錯誤時觸發

complete 區域性事件

不管你請求成功還是失敗,即便是同步請求,你都能在請求完成時觸發這個事件。

ajaxcomplete 全域性事件

全域性的請求完成時觸發

ajaxstop 全域性事件

當沒有ajax正在進行中的時候,觸發。

區域性事件**的引數在文件中寫的很清楚了,這裡就不累述了。

全域性事件中,除了ajaxstart和ajaxstop之外,其他的事件都有3個引數

第乙個是事件,第二個是xhr物件,第三個引數最有用,是當時呼叫這個ajax的時候的引數。

對於ajaxerror,還有第四個引數thrownerror,只有當異常發生時才會被傳遞。

我們可以利用ajaxoptions來寫乙個全域性的ajax事件。

比如$("#msg").beforesend(function(e,xhr,o) ).ajaxsuccess(function(e,xhr,o) ).ajaxerror(function(e,xhr,o) );

對於這個例子,

這樣我們就可以很方便的全域性地在某個地方顯示當前的ajax狀態。

當然,之前說了,第三個引數實際上是傳遞給ajax的引數。get/post/load/getscript/getjson等方法本質上都是呼叫ajax方法的,所以ajaxoptions.url屬性總是有效的。

還有更豐富的例子。

如果你用ajax呼叫,還可以傳遞自定義引數。下面的例子我就自定義了乙個msg引數給了ajax呼叫

//自定義引數msg

$.ajax();

$.ajax();

$.ajax();

$.ajax();

//這裡就能獲取到自定義引數msg。

//這可以用來區別對待不同的ajax請求。

$("#msg").beforesend(function(e,xhr,o) ).ajaxsuccess(function(e,xhr,o) ).ajaxerror(function(e,xhr,o) );

最後對於load方法,還有話說。

其他的簡易ajax方法,比如get,post,getjson等,他們的**函式都是設定了success**。

而只有load設定的其實是complete**。

所以,load裡設定的**函式的引數應該有2個。

xmlhttprequest和textstatus

但實際上也並非如此。

load的**有三個引數

所以,你可以在load的**裡

通過textstatus==」success」或者textstatus==」error」來判斷是否呼叫成功。

或者用xmlhttprequest.status屬性判斷是200還是404或者其他的。

這點上,我認為比普通的get/post等方法更先進。如果要單數設定每get的error是不可能的。但是設定乙個全域性的ajaxerror其實也是不錯的選擇。

jQuery中的Ajax全域性事件

全域性事件會在有ajax請求的情況下觸發。方法名稱 說明ajaxstart callback ajax請求開始時執行的函式 ajaxstop callback ajax請求結束時執行的函式 ajaxcomplete callback ajax請求完成時執行的函式 ajaxerror callback...

jquery的ajax全域性事件詳解

jquery在ajax方面是非常強大和方便的,以下是jquery進行ajax請求時方法模板 ajax beforesend function success function data complete function 關於 ajax 方法的使用,不是明河寫這篇文章的目的,今天明河主要講解當進行a...

Ajax 使用jQuery 實現Ajax

get post 方式 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6head 7 script type text j ascript src jquery.js script 8...