ajax全域事件引用方式以及各事件(全域/局部)執行順序-js教程-PHP中文網

ajax全域事件引用方式以及各事件(全域/局部)執行順序

寻∝梦

發布： 2018-09-10 14:42:38

原創

1944 人瀏覽過

本篇文章主要的介紹了關於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中文網其他相關文章！