ajax全域事件引用方式以及各事件(全域/局部)執行順序
- 寻∝梦原創
- 2018-09-10 14:42:381903瀏覽
本篇文章主要的介紹了關於ajax的全局事件引用方式以及各個事件執行順序，現在我們一起來閱讀本篇文章吧
jquery的ajax方法的全部全局事件：
ajaxStart：ajax請求開始前
ajaxSend：ajax請求時
ajaxSuccess：ajax取得資料後
ajaxComplete：ajax請求完成時
ajaxError：ajax請求發生錯誤後
ajaxStop：ajax請求停止後
#ajax方法的全局事件的用處
當你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都會預設觸發全域事件，只是通常不會綁定全域事件，但實際上這些全域事件非常有用處。
ajax全域事件，有個典型的應用程式場合：你的頁面存在多個甚至為數不少的ajax請求，但是這些ajax請求都有相同的訊息機制。 ajax請求開始前顯示提示框，提示「正在讀取資料「；ajax請求成功時提示框顯示「資料獲取成功」；ajax請求結束後隱藏提示框。不使用全域事件的做法是：給$.ajax()加上beforeSend、success、complete回呼函數，在回呼函數中加上處理提示框。使用全域事件的做法是：
$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//.....
}
function onComplete(event, xhr, settings) {
//.....
}
function onSuccess(event, xhr, settings) {
//.....
}
jquery中各個事件執行順序如下
1.ajaxStart(全域事件)
2.beforeSend(局部事件)
3.ajaxSend(全域事件)
4.success(局部事件)
5.ajaxSuccess(全域事件)
6.error(局部事件)
7.ajaxError (全域事件)
8.complete(局部事件)
9.ajaxComplete(全域事件)
##10.ajaxStop(全域事件)範例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
<p id="ajaxStateID"></p>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function() { //点击按钮，并执行ajax请求
$(document).ajaxStart(function() {
$("#ajaxStateID").append("ajaxStart" + "<br/>");
alert("ajaxStart");
}).ajaxSend(function() {
$("#ajaxStateID").append("ajaxSend" + "<br/>");
alert("ajaxSend");
}).ajaxSuccess(function() {
$("#ajaxStateID").append("ajaxSuccess" + "<br/>");
alert("ajaxSuccess");
}).ajaxError(function() {
$("#ajaxStateID").append("ajaxError" + "<br/>");
alert("ajaxError");
}).ajaxComplete(function() {
$("#ajaxStateID").append("ajaxComplete" + "<br/>");
alert("ajaxComplete");
}).ajaxStop(function() {
$("#ajaxStateID").append("ajaxStop" + "<br/>");
alert("ajaxStop");
});
$("#ajaxReuqestID").click(function() {
$.ajax({
url: "server/ajaxtxt.txt",
global: true,
beforeSend: function() {
$("#ajaxStateID").append("berforeSend" + "<br/>");
alert("berforeSend");
},
success: function() {
$("#ajaxStateID").append("success" + "<br/>");
alert("success");
},
error: function() {
$("#ajaxStateID").append("error" + "<br/>");
alert("error");
},
complete: function() {
$("#ajaxStateID").append("complete" + "<br/>");
alert("complete");
}
});
});
});
</script>
</body>
</html>
以上是ajax全域事件引用方式以及各事件(全域/局部)執行順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn