当前位置:Gxlcms > JavaScript > ajax全局事件引用方式以及各个事件(全局/局部)执行顺序

ajax全局事件引用方式以及各个事件(全局/局部)执行顺序

时间:2021-07-01 10:21:17 帮助过:3人阅读

本篇文章主要的介绍了关于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全局事件引用方式以及各个事件(全局/局部)执行顺序的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行