← jQuery的:contains()选择器:基于文本内容精准定位元素 jQuery ajaxError()方法:全局AJAX错误捕捉与处理 →

jQuery ajaxSend()方法:在请求起飞前插一脚

原创 2026-05-04 jQuery 已有人查阅

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>

运行过程拆解:

  1. 绑定监听器:页面加载后,$(document).ajaxSend() 就准备好监听所有未来的 AJAX 请求了。

  2. 点击按钮:你点击“点击我,加载数据”按钮,触发了 $.ajax()

  3. 触发全局事件:就在 $.ajax() 真的要把请求发出去的前一瞬间,我们注册的 ajaxSend 回调被执行了。

  4. 弹出提示:弹出对话框,显示“即将向服务器发送请求,目标地址是:https://api.example.com/data“。此时,请求还没发出。

  5. 继续执行:你关闭弹窗,ajaxSend 的任务完成,真正的网络请求才正式开始。后续会进入 success 或 error 回调。

本节课程知识要点

  • ajaxSend() 是一个全局性质的 AJAX 事件,它与 ajaxStartajaxStopajaxCompleteajaxErrorajaxSuccess 一同构成了jQuery的全局监听体系。

  • 它非常适合用来实现全局加载动画(如显示进度条)统一日志记录、或在特定条件下中止请求前的之后检查。我个人在构建需要权限校验的系统时,习惯在这里做一次性的 token 有效性预判,虽然逻辑重,但能拦截不少无效请求。

  • 在它的回调函数里,可以通过修改 jqxhr 对象来设置自定义 HTTP 请求头,例如添加一个统一的认证令牌,但这个操作需谨慎,确保不要覆盖掉单个请求里有意设置的特殊 header。

  • 不管你页面上有多少个不同的 AJAX 请求,只要它们是通过 jQuery 发起的,这个 ajaxSend 方法都会对它们一视同仁地生效。在回调函数内部,通常需要根据 settings.url 或其他自定义参数来做条件判断,避免“一刀切”的逻辑。

← jQuery的:contains()选择器:基于文本内容精准定位元素 jQuery ajaxError()方法:全局AJAX错误捕捉与处理 →
分享笔记 (共有 篇笔记)
验证码:
微信公众号