淺談jQuery中Ajax事件beforesend及各參數含義_jquery

來源:互聯網
上載者:User

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及各參數含義就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援雲棲社區。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.