一、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.poluoluo.com/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.poluoluo.com/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>