全局 Ajax 事件
全局 Ajax 事件
必須當(dāng)頁面上存在任何ajax請求的時候都將觸發(fā)這些特定的全局ajax處理函數(shù)。
如果在jQuery.ajaxSetup()中的global屬性設(shè)置成true,那么這些全局函數(shù)將會在每一個ajax上面都觸發(fā),這正是默認(rèn)值。
注意:
1.全局事件永遠(yuǎn)不會再跨域的腳本中運(yùn)行,也不會再JSONP請求中運(yùn)行。
2.在jQuery1.9以上,所有的全局ajax函數(shù)必須綁定掃到document上,也就是$(document).事件
3.只有在$.ajax()亦或$.ajaxSetup()中的globle設(shè)置成true才能使用ajax全局函數(shù),false將不能使用。
在jQuery.ajaxSetup( options ) 中的options參數(shù)屬性中,有一個global屬性:
global
類型:布爾值
默認(rèn)值: true
說明:是否觸發(fā)全局的 Ajax 事件.
這個屬性用來設(shè)置是否觸發(fā)全局的 Ajax 事件。全局 Ajax 事件是一系列伴隨 Ajax 請求發(fā)生的事件。主要有如下事件:
用一個示例講解各個事件的觸發(fā)順序:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>jQuery Ajax - AjaxEvent</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("#btnAjax").bind("click", function(event) { $.get("../data/AjaxGetMethod.aspx"); }); $("#divResult").ajaxComplete(function(evt, request, settings) { $(this).append('<div>ajaxComplete</div>'); }); $("#divResult").ajaxError(function(evt, request, settings) { $(this).append('<div>ajaxError</div>'); }); $("#divResult").ajaxSend(function(evt, request, settings) { $(this).append('<div>ajaxSend</div>'); }); $("#divResult").ajaxStart(function() { $(this).append('<div>ajaxStart</div>'); }); $("#divResult").ajaxStop(function() { $(this).append('<div>ajaxStop</div>'); }); $("#divResult").ajaxSuccess(function(evt, request, settings) { $(this).append('<div>ajaxSuccess</div>'); }); }); </script> </head> <body> <br /><button id="btnAjax">send Ajax request</button><br/> <div id="divResult"></div> </body> </html>
我們可以通過將默認(rèn)options的global屬性設(shè)置為false來取消全局 Ajax 事件的觸發(fā)。
針對每一個請求(per request)
$.ajaxComplete()
例子:
HTML代碼:
<div class="trigger">Trigger</div><div class="result"></div><div class="log"></div>
jquery代碼:
$( document ).ajaxComplete(function() { $( ".log" ).text( "Triggered ajaxComplete handler." ); }); $( ".trigger" ).click(function() { $( ".result" ).load( "ajax/test.html" ); });
當(dāng)用戶點(diǎn)擊class=trigger的元素的時候,加載html文件,請求完成之后class=log元素上顯示信息。
無論什么Ajax請求完成,都將觸發(fā)ajaxComplete事件,所以,你可以如下進(jìn)行判斷
$( document ).ajaxComplete(function( event, xhr, settings ) { if ( settings.url === "ajax/test.html" ) { $( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseText ); } });
語法形式
$(document).ajaxComplete(function(event,xhr,options))
所以上面進(jìn)行指定ajax判斷的時候使用的setting,也就是ajax request傳遞的對象,其中含有url屬性,如果傳遞的url和需要判斷的指定的url一樣,則進(jìn)行處理。
$.ajaxError()
$(document).ajaxError(function(event,xhr,options,exc))
當(dāng)ajaxError事件被觸發(fā)的時候,不管ajax請求是否完成。
每次執(zhí)行ajaxerror事件的時候,傳遞了event對象,jqXHR對象(jQuery1.5之前是XHR對象),和用于請求的settings對象。
當(dāng)HTTP error發(fā)生,第四個參數(shù)(thownError)接受了HTTP的狀態(tài)的文本部分,例如“Not Found”亦或“Internal Server Error”
to restrict the error callback to only handling events dealing with a particular URL:
ajaxSend()
send()發(fā)送的時候發(fā)觸發(fā)
ajaxSuccess()是請求成功時觸發(fā),注意和ajaxComplete不同的是,ajaxComplete是不管請求失敗還是成功,只要完成了就執(zhí)行。
針對一批請求
ajaxStart(),ajaxStop()
是針對文本中所有的ajax請求的,當(dāng)?shù)谝粋€ajax請求發(fā)送時觸發(fā)ajaxStart()事件,當(dāng)最后一個ajax請求完成時,觸發(fā)ajaxStop()事件,不同的是,ajaxSend()和ajaxComplete是針對文本中每一次的ajax請求的。
所以如果你在文本中一次使用了3個請求,ajaxStart()會在第一個請求發(fā)起時觸發(fā),ajaxStop()會在最后一個請求結(jié)束時觸發(fā),所以它們常常組合用于顯示loading等待框等。因?yàn)樗麄兲幚淼氖且蝗篴jax請求,所以它們的回調(diào)函數(shù)中沒有任何參數(shù)
.ajaxStart( handler() )
.ajaxStop( handler() )