DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 淺談jQuery中Ajax事件beforesend及各參數含義
淺談jQuery中Ajax事件beforesend及各參數含義
編輯:JQuery入門技巧     

Ajax會觸發很多事件。

有兩種事件,一種是局部事件,一種是全局事件:

局部事件:通過$.ajax來調用並且分配。

$.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請求不希望產生全局的事件,則可以設置global:false

$.ajax({
url: "test.html",
global: false,
// ...
});

事件的順序如下:

ajaxStart 全局事件
開始新的Ajax請求,並且此時沒有其他ajax請求正在進行。

beforeSend 局部事件
當一個Ajax請求開始時觸發。如果需要,你可以在這裡設置XHR對象。

ajaxSend 全局事件
請求開始前觸發的全局事件

success 局部事件
請求成功時觸發。即服務器沒有返回錯誤,返回的數據也沒有錯誤。

ajaxSuccess 全局事件
全局的請求成功

error 局部事件
僅當發生錯誤時觸發。你無法同時執行success和error兩個回調函數。

ajaxError 全局事件
全局的發生錯誤時觸發

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

ajaxComplete 全局事件
全局的請求完成時觸發

ajaxStop 全局事件
當沒有Ajax正在進行中的時候,觸發。

局部事件回調的參數在文檔中寫的很清楚了,這裡就不累述了。

全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3個參數

event, XMLHttpRequest, ajaxOptions

第一個是事件,第二個是XHR對象,第三個參數最有用,是當時調用這個ajax的時候的參數。

對於ajaxError,還有第四個參數thrownError,只有當異常發生時才會被傳遞。

我們可以利用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狀態。

當然,之前說了,第三個參數實際上是傳遞給ajax的參數。get/post/load/getScript/getJSON等方法本質上都是調用ajax方法的,所以ajaxOptions.url屬性總是有效的。

還有更豐富的例子。

如果你用ajax調用,還可以傳遞自定義參數。下面的例子我就自定義了一個msg參數給了ajax調用

//自定義參數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:"頁面四"});
//這裡就能獲取到自定義參數msg。
//這可以用來區別對待不同的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等,他們的回調函數都是設置了success回調。

而只有load設置的其實是complete回調。

所以,load裡設置的回調函數的參數應該有2個。

XMLHttpRequest和textStatus

但實際上也並非如此。

load的回調有三個參數

XMLHttpRequest.responseText, textStatus, XMLHttpRequest

所以,你可以在load的回調裡

通過textStatus==”success”或者textStatus==”error”來判斷是否調用成功。

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

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

以上這篇淺談jQuery中Ajax事件beforesend及各參數含義就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved