ajaxSend() 是 jQuery 里一个挺实用的全局 AJAX 事件。它的工作时机很明确:在每一个 AJAX 请求被发送到服务器之前触发。注意,是“即将发送”那一刻,不是发送后,也不是完成时。这给了我们在数据离开客户端前,做之后一刻准备或检查的机会。
语法结构
$(document).ajaxSend(function(event, xhr, options) {
// 你的逻辑代码
});
这个方法直接绑定在 document 对象上,用来监听页面上所有由 jQuery 发起的 AJAX 请求。它接收一个回调函数,这个函数本身带有三个对我们很有用的参数:
-
event:代表当前发生的事件对象,你可以用它来阻止某些默认行为或进行事件相关的操作。 -
xhr:即XMLHttpRequest对象,这是整个 AJAX 通信的核心。通过它,我们能接触到请求的底层属性,比如设置自定义请求头。 -
options:这个参数包含了你在$.ajax()调用时传入的全部配置项。最常用的就是options.url,可以直接拿到本次请求的目标地址。
为什么要在请求发送前做点什么?
你可能会想,在 $.ajax() 的 beforeSend 回调里不是也能做类似的事吗?没错,但那是局部设置,你需要为每一个单独的 AJAX 请求去定义。ajaxSend() 的优势在于它是全局的。
我的个人经验是,当你有个项目,里面散落着好几十个 AJAX 请求,突然有一天产品经理要求在所有请求前统一加上一个加载状态,或者对某些请求的 URL 做统一的日志记录。这时候,一个个去改 beforeSend 简直是噩梦。ajaxSend() 能让你在一个地方集中处理,代码干净得多。所以,简单的原则是:针对单个请求的特殊逻辑用 beforeSend,需要全局统一管控的场景,就用 ajaxSend()。
代码示例:先礼后兵,请求前打个招呼
我们不用外部文件,来一个更直接的例子。假设页面上有一个按钮,点击后会向一个接口地址 https://api.example.com/data 发送 GET 请求获取数据。我们在请求出发前,用一个弹窗告知用户即将访问的资源路径。
<!DOCTYPE html>
<html>
<head>
<title>ajaxSend 方法实践</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
// 全局 AJAX 事件监听器,像哨兵一样站岗
$(document).ajaxSend(function(event, jqxhr, settings){
// 弹出一个友善的提示框,告知即将请求的URL
alert("即将向服务器发送请求,目标地址是:\n" + settings.url);
});
// 按钮点击后,触发一个 AJAX 请求
$("#loadBtn").click(function(){
$.ajax({
url: "https://api.example.com/data",
type: "GET",
success: function(response){
// 假设请求成功,把结果显示在页面上
$("#content").html("<p>数据加载成功!服务器返回:</p>" + JSON.stringify(response));
},
error: function(){
$("#content").html("<p style='color:red;'>请求遇到问题,请检查网络连接。</p>");
}
});
});
});
</script>
</head>
<body>
<h3>jQuery ajaxSend() 全局事件演示</h3>
<p>单击下方的按钮,会先看到一个弹窗,然后数据才会开始加载。</p>
<button id="loadBtn">点击我,加载数据</button>
<div id="content" style="margin-top:15px;"></div>
</body>
</html>
运行过程拆解:
-
绑定监听器:页面加载后,
$(document).ajaxSend()就准备好监听所有未来的 AJAX 请求了。 -
点击按钮:你点击“点击我,加载数据”按钮,触发了
$.ajax()。 -
触发全局事件:就在
$.ajax()真的要把请求发出去的前一瞬间,我们注册的ajaxSend回调被执行了。 -
弹出提示:弹出对话框,显示“即将向服务器发送请求,目标地址是:https://api.example.com/data“。此时,请求还没发出。
-
继续执行:你关闭弹窗,
ajaxSend的任务完成,真正的网络请求才正式开始。后续会进入success或error回调。
本节课程知识要点
-
ajaxSend()是一个全局性质的 AJAX 事件,它与ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess一同构成了jQuery的全局监听体系。 -
它非常适合用来实现全局加载动画(如显示进度条)、统一日志记录、或在特定条件下中止请求前的之后检查。我个人在构建需要权限校验的系统时,习惯在这里做一次性的 token 有效性预判,虽然逻辑重,但能拦截不少无效请求。
-
在它的回调函数里,可以通过修改
jqxhr对象来设置自定义 HTTP 请求头,例如添加一个统一的认证令牌,但这个操作需谨慎,确保不要覆盖掉单个请求里有意设置的特殊 header。 -
不管你页面上有多少个不同的 AJAX 请求,只要它们是通过 jQuery 发起的,这个
ajaxSend方法都会对它们一视同仁地生效。在回调函数内部,通常需要根据settings.url或其他自定义参数来做条件判断,避免“一刀切”的逻辑。