AJAX调用执行时是否触发事件？如何捕获页面AJAX完成通用事件？

刚好我之前处理过类似的需求，给你分享两个最实用的方案，不管你用jQuery还是原生JS都能轻松搞定：

一、用jQuery的全局AJAX事件（最简便） #

如果你的项目已经引入了jQuery，那这绝对是最快的实现方式。jQuery内置了全局AJAX事件，其中ajaxComplete会在每一次AJAX请求完成时触发——不管请求成功还是失败，完美匹配你的需求。

代码示例：

// 绑定全局AJAX完成事件到document上
$(document).ajaxComplete(function(event, xhr, settings) {
    // 在这里获取本次AJAX的关键信息，比如请求地址、状态码
    console.log("AJAX请求完成：", settings.url, "状态码：", xhr.status);
    
    // 执行你的重绑定处理程序逻辑
    rebindHandlers();
});

// 假设这是你需要重新绑定的处理函数
function rebindHandlers() {
    // 举个例子：先移除旧的点击事件，再绑定新的（避免重复绑定）
    $('.dynamic-element').off('click').on('click', function() {
        // 这里写你的业务逻辑
        alert('动态元素点击事件已重新绑定');
    });
}

⚠️ 注意：如果某个AJAX请求手动设置了global: false，这个全局事件不会触发，遇到这种情况要么修改请求配置，要么单独给这个请求加回调。

二、原生JavaScript方案（兼容所有场景） #

要是项目没用到jQuery，我们可以通过重写原生的AJAX相关方法，来监听所有请求的完成事件，覆盖XMLHttpRequest和Fetch API两种情况：

1. 监听XMLHttpRequest请求 #

// 先保存原生的send方法，避免覆盖后丢失原功能
const originalXhrSend = XMLHttpRequest.prototype.send;

// 重写send方法
XMLHttpRequest.prototype.send = function() {
    // 给当前请求绑定load事件（请求完成时触发）
    this.addEventListener('load', function() {
        // 获取请求信息
        console.log("XHR请求完成：", this.responseURL, "状态码：", this.status);
        // 执行重绑定
        rebindHandlers();
    });

    // 调用原生的send方法，保证原请求逻辑正常执行
    originalXhrSend.apply(this, arguments);
};

2. 监听Fetch API请求 #

Fetch是Promise-based的请求方式，上面的方法管不了它，所以我们单独重写fetch函数：

const originalFetch = window.fetch;

window.fetch = function(...args) {
    // 调用原生fetch，在Promise完成后触发逻辑
    return originalFetch(...args)
        .then(response => {
            console.log("Fetch请求完成：", response.url, "状态码：", response.status);
            rebindHandlers();
            return response; // 一定要返回response，不影响原业务逻辑
        })
        .catch(error => {
            console.log("Fetch请求失败：", error);
            rebindHandlers();
            throw error; // 抛出错误，保证原错误处理逻辑正常
        });
};

// 通用的重绑定函数
function rebindHandlers() {
    const elements = document.querySelectorAll('.dynamic-element');
    elements.forEach(el => {
        // 先移除旧事件，再绑定新事件
        el.removeEventListener('click', handleClick);
        el.addEventListener('click', handleClick);
    });
}

function handleClick() {
    alert('原生动态元素点击事件已重新绑定');
}

总结 #

• 用jQuery的话直接用ajaxComplete全局事件，代码最少最省心；
• 原生环境下，结合重写XMLHttpRequest和Fetch，就能覆盖所有AJAX类请求的场景；
• 重绑定时记得先移除旧事件再绑定新的，避免重复触发的问题。

内容的提问来源于stack exchange，提问作者Morales