Jquery Ajax學習執行個體7 Ajax所有過程事件分析樣本

一、Ajax所有過程事件分析

JQuery在執行Ajax的過程中會觸發很多事件。
這些事件可以分為兩種事件，一種是局部事件(Local)，一種是全域事件(Global)。
局部事件：可以通過$.ajax來調用,你某一個Ajax請求不希望產生全域的事件，則可以設定global:false。
全域事件：跟click等事件類別似,可以綁定到到每一個DOM元素上。
這些事件的按照事件的觸發順序如下介紹：

局部事件(Local)	全域事件(Global)
	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，只有當異常發生時才會被傳遞。

二、Ajax所有過程事件樣本

2.1、HTML代碼

<div>

<input type="button" onclick="BtnSpareClick();" value="PartEvents" />
<input type="button" onclick="BtnGlobalClick();" value="GlobalEvents" />

</div>

<div id="Result">Result</div>
<div id="Process">Process</div>

2.2、Jquery Ajax指令碼

局部事件(Local)執行個體

全域事件(Global)執行個體

<script language="javascript" type="text/javascript"> $.ready(function BtnSpareClick() { $.ajax({ type: "get", url: "http://www.jb51.net/windy2008/rss", data: {}, global: false, beforeSend: function(data, status, settings) { $("#Process").text("Part請求開始前"); alert($("#Process").text()); }, success: function(data, status, settings) { $("item", data).each(function(i, domEle) { $("#Result").append("<div>" + $(domEle).children("title").text() + "</div>"); }); $("#Process").text("Part請求成功時"); alert($("#Process").text()); }, complete: function(data, status, settings) { $("#Process").text("Part請求完成時"); alert($("#Process").text()); }, error: function(data, status, settings) { $("#Process").text("Part請求錯誤時"); alert($("#Process").text()); } }); }); </script>

<script language="javascript" type="text/javascript"> $.ready(function BtnGlobalClick() { $.get("http://www.jb51.net/windy2008/rss", {}, function(data, status, settings) { $("item", data).each(function(i, domEle) { $("#Result").append("<div>" + $(domEle).children("title").text() + "</div>"); }); }); $("#Process").ajaxStart(function() { alert($(this).text()); $(this).text("開始新的Ajax請求"); }); $("#Process").ajaxStop(function() { $(this).text("當沒有Ajax進行中中的時候"); alert($(this).text()); }); $("#Process").ajaxSend(function() { $(this).text("請求開始前"); alert($(this).text()); }); $("#Process").ajaxSuccess(function() { $(this).text("請求成功"); alert($(this).text()); }); $("#Process").ajaxComplete(function() { $(this).text("請求完成時"); alert($(this).text()); }); $("#Process").ajaxError(function() { $(this).text("請求錯誤時"); alert($(this).text()); }); }); </script>