jQuery中Ajax全局事件引用方式及各個事件(全局/局部)執(zhí)行順序
jquery中各個事件執(zhí)行順序如下:
1.ajaxStart(全局事件)
2.beforeSend(局部事件)
3.ajaxSend(全局事件)
4.success(局部事件)
5.ajaxSuccess(全局事件)
6.error(局部事件)
7.ajaxError (全局事件)
8.complete(局部事件)
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
其中,全局事件可以在ajax相關(guān)方法外引用(比如,通過該方式將ajax執(zhí)行各個階段的信息顯示在頁面某個地方)。
下例演示一次ajax請求過程中各個事件執(zhí)行的順序,以及全局ajax的使用方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
//點(diǎn)擊按鈕,并執(zhí)行ajax請求
$("#ajaxReuqestID").click(function(){
$.ajax({
url: "http://blog.csdn.net/gaoyusi4964238",
beforeSend:function(){
$("#ajaxStateID").text("berforeSend");
alert("berforeSend");
},
success: function(){
$("#ajaxStateID").text("success");
alert("success");
},
error:function(){
$("#ajaxStateID").text("error");
alert("error");
},
complete:function(){
$("#ajaxStateID").text("complete");
alert("complete");
}
});
});
$("#ajaxStateID").ajaxStart(function(){
$(this).text("ajaxStart");
alert("ajaxStart");
}).ajaxSend(function(){
$(this).text("ajaxSend");
alert("ajaxSend");
}).ajaxSuccess(function(){
$(this).text("ajaxSuccess");
alert("ajaxSuccess");
}).ajaxError(function(){
$(this).text("ajaxError");
alert("ajaxError");
}).ajaxComplete(function(){
$(this).text("ajaxComplete");
alert("ajaxComplete");
}).ajaxStop(function(){
$(this).text("ajaxStop");
alert("ajaxStop");
});
})
// --></mce:script>
</head>
<body>
<input type="button" value="點(diǎn)擊觸發(fā)ajax請求" id="ajaxReuqestID"/>
<div id="ajaxStateID"></div>
</body>
</html>
以上所述是小編給大家介紹的jQuery中Ajax全局事件引用方式及各個事件(全局/局部)執(zhí)行順序的相關(guān)知識,希望對大家有所幫助!
相關(guān)文章
全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊,涉及jQuery針對頁面圖片元素與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句,jQuery選擇器真心很強(qiáng)大!接下來詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式2012-12-12
JQuery中DOM加載與事件執(zhí)行實(shí)例分析
這篇文章主要介紹了JQuery中DOM加載與事件執(zhí)行,實(shí)例分析了jQuery中DOM加載及事件執(zhí)行的原理與實(shí)現(xiàn)方法,并補(bǔ)充說明了windows.onload方法和$(document).ready()方法的區(qū)別,需要的朋友可以參考下2015-06-06
jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法,涉及jQuery插件jquery.kinMaxShow實(shí)現(xiàn)焦點(diǎn)圖的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼,非常的簡單實(shí)用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。2015-03-03

