jQuery ajaxStart和ajaxStop全局事件的用法（附带实例）

在 jQuery 中存在 6 个 AJAX 全局事件，详细说明如下表所示：

表：AJAX 的全局事件
全局事件名称	参数	说明
ajaxComplete(callback)	callback	AJAX 请求完成时执行的函数，在 jQuery 3.5 中已废弃，请使用 .on("ajaxComplete", handler)
ajaxError(callback)	callback	AJAX 请求发生错误时执行的函数，其中捕捉到的错误可以作为最后一个参数进行传递，在 jQuery 3.5 中已废弃，请使用 .on("ajaxError", handler)
ajaxSend(callback)	callback	AJAX 请求发送前执行的函数，在 jQuery 3.5 中已废弃，请使用 .on("ajaxSend", handler)
ajaxStart(callback)	callback	AJAX 请求开始时执行的函数，在 jQuery 3.5 中已废弃，请使用 .on("ajaxStart", handler)
ajaxStop(callback)	callback	AJAX 请求结束时执行的函数，在 jQuery 3.5 中已废弃，请使用 .on("ajaxStop", handler)
ajaxSuccess(callback)	callback	AJAX 请求成功时执行的函数，在 jQuery 3.5 中已废弃，请使用 .on("ajaxSuccess", handler)

jQuery 中所有的全局事件都是将 XMLHttpRequest 对象和其设置作为参数传递给回调函数的，因此在处理回调函数时，只要处理其传回的参数值即可。

在 jQuery 中使用 AJAX 获取异步数据时，会经常使用 ajaxStart 和 ajaxStop 这两个全局事件：

当 AJAX 请求开始时会触发 ajaxStart 全局事件的回调函数，该回调函数往往用于编写一些准备性工作，例如提示“数据正在获取中……”；
当 AJAX 请求结束时会触发 ajaxStop 全局事件的回调函数，这个回调函数往往与前者相配合，说明请求的最后进展状态。

例如网站加载图片的速度较慢，在图片加载过程中可以给用户提供一些友好的提示信息，常用的提示信息为“图片加载中……”，待图片加载完毕后隐藏该提示信息。

【实例】使用 ajaxStart 与 ajaxStop 全局事件添加信息提示。
1) 创建index.html页面，构建表单，具体代码为：

<div id="msg">数据正在发送....</div>
<form id="testForm" action="">
    用户名：<input type="text" name="username" /><br /><br />
    性别：<input type="text" name="sex" /><br /><br />
    年龄：<input type="text" name="age" /><br /><br />
    邮箱：<input type="text" name="email" /><br /><br />
    地址：<input type="text" name="address" /><br /><br />
    内容：<textarea id="content" name="content"></textarea><br /><br />
    <input type="button" id="button" name="button" value="提交" /><br /><br />
    <div id="responseText"></div>
</form>

2) 首先为 <document> 元素绑定 ajaxStart 全局事件，在 AJAX 请求开始时，提示用户“数据正在发送……”，然后为 <document> 元素绑定 ajaxStop 全局事件，在请求结束后，修改提示信息为“数据获取成功”并将提示信息隐藏。具体代码如下：

$(document).on("ajaxStart", function () {
    $("#msg").show();          // 显示数据
});

$(document).on("ajaxStop", function () {
    $("#msg")
        .html("数据获取成功")  // 修改提示信息
        .slideUp(200);         // 隐藏提示信息
});

运行程序，效果如下图所示：

图 2 AJAX 的全局事件

由于 AJAX 执行速度较快，为了便于查看提示信息，提示信息的隐藏使用了滑动隐藏方法 slideUp() 而没有使用 hide() 方法。

jQuery ajaxStart和ajaxStop全局事件的用法（附带实例）

相关文章