淺談jQuery中Ajax事件beforesend及各參數(shù)含義
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(); });
當(dāng)然,你某一個Ajax請求不希望產(chǎn)生全局的事件,則可以設(shè)置global:false
$.ajax({ url: "test.html", global: false, // ... });
事件的順序如下:
ajaxStart 全局事件
開始新的Ajax請求,并且此時沒有其他ajax請求正在進(jìn)行。
beforeSend 局部事件
當(dāng)一個Ajax請求開始時觸發(fā)。如果需要,你可以在這里設(shè)置XHR對象。
ajaxSend 全局事件
請求開始前觸發(fā)的全局事件
success 局部事件
請求成功時觸發(fā)。即服務(wù)器沒有返回錯誤,返回的數(shù)據(jù)也沒有錯誤。
ajaxSuccess 全局事件
全局的請求成功
error 局部事件
僅當(dāng)發(fā)生錯誤時觸發(fā)。你無法同時執(zhí)行success和error兩個回調(diào)函數(shù)。
ajaxError 全局事件
全局的發(fā)生錯誤時觸發(fā)
complete 局部事件
不管你請求成功還是失敗,即便是同步請求,你都能在請求完成時觸發(fā)這個事件。
ajaxComplete 全局事件
全局的請求完成時觸發(fā)
ajaxStop 全局事件
當(dāng)沒有Ajax正在進(jìn)行中的時候,觸發(fā)。
局部事件回調(diào)的參數(shù)在文檔中寫的很清楚了,這里就不累述了。
全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3個參數(shù)
event, XMLHttpRequest, ajaxOptions
第一個是事件,第二個是XHR對象,第三個參數(shù)最有用,是當(dāng)時調(diào)用這個ajax的時候的參數(shù)。
對于ajaxError,還有第四個參數(shù)thrownError,只有當(dāng)異常發(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+"請求失敗"); });
對于這個例子,
這樣我們就可以很方便的全局地在某個地方顯示當(dāng)前的ajax狀態(tài)。
當(dāng)然,之前說了,第三個參數(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ù)都是設(shè)置了success回調(diào)。
而只有l(wèi)oad設(shè)置的其實是complete回調(diào)。
所以,load里設(shè)置的回調(diào)函數(shù)的參數(shù)應(yīng)該有2個。
XMLHttpRequest和textStatus
但實際上也并非如此。
load的回調(diào)有三個參數(shù)
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
所以,你可以在load的回調(diào)里
通過textStatus==”success”或者textStatus==”error”來判斷是否調(diào)用成功。
或者用XMLHttpRequest.status屬性判斷是200還是404或者其他的。
這點上,我認(rèn)為比普通的get/post等方法更先進(jìn)。如果要單數(shù)設(shè)置每get的error是不可能的。但是設(shè)置一個全局的ajaxError其實也是不錯的選擇
以上這篇淺談jQuery中Ajax事件beforesend及各參數(shù)含義就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery簡單實現(xiàn)點擊文本框復(fù)制內(nèi)容到剪貼板上的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)點擊文本框復(fù)制內(nèi)容到剪貼板上的方法,涉及jQuery針對瀏覽器的判定與剪貼板的讀寫操作技巧,需要的朋友可以參考下2016-08-08jquery 獲取標(biāo)簽名(tagName)示例代碼
如果是需要取到tagName后再進(jìn)行判斷,那么下面的代碼或許對大家有所幫助,感興趣的朋友不妨嘗試一下哈2013-07-07jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹,需要的朋友可以參考下。2011-11-11jQuery+css實現(xiàn)百度百科的頁面導(dǎo)航效果
這篇文章主要介紹了jQuery+css實現(xiàn)百度百科的頁面導(dǎo)航效果,需要的朋友可以參考下2014-12-12jQuery EasyUI API 中文文檔 - Spinner微調(diào)器使用
jQuery EasyUI API 中文文檔 - Spinner微調(diào)器使用,需要的朋友可以參考下。2011-10-10