【问题标题】：ajaxComplete in pure JavaScript纯 JavaScript 中的 ajaxComplete
【发布时间】：2017-07-27 02:21:03
【问题描述】：

我正在使用内容脚本构建一个 chrome 扩展。

我有一段代码可以在页面上使用 jQuery 的所有 ajax 请求成功后注入 DOM 元素。如果没有 jQuery，你如何重新创建它？请注意，我无法修改页面上的任何 ajax 请求。

if(window.jQuery){
jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
    for(var i =0; i< $jq('div.handwave').length; i++){
        if($($('div.handwave')[i]).children('.done').length < 1){
            $(document).find('div.handwave').eq(i).append(wind);
        }
    }
});
}

这可能吗？

【问题讨论】：

要清楚——jQuery 只是一个用 JavaScript 编写的库——用 jQuery 做任何事情都可以用 JavaScript 做，因为在底层它是 JavaScript。
AJAX Complete Handler in Pure JS的可能重复
是的。只需使用 XMLHttpRequest 代替。
I was able to do is listen in all successful ajax responses - 不，您可以收听所有 jquery 成功响应，而不是 所有 ajax 响应，因为 AJAX 不只是一个 jquery 概念 - 即如果某些代码使用 XMLHttpRequest 或 fetch，那么 jQuery 不知道它......所以，如果你所有的 AJAX 都是用 jQuery 编写的，你已经需要 jQuery，所以使用 jQuery
@xoail 你可能想看看developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/…

标签： javascript jquery google-chrome-extension

【解决方案1】：

更新

如果您正在编写 Chrome 扩展程序，您可能应该使用 chrome.webRequest API。见https://developer.chrome.com/extensions/webRequest

您可以覆盖发出 AJAX 请求所需的现有方法之一，例如 XMLHttpRequest.prototype.send，以添加您自己的 load 事件侦听器。例如

(function() {
    const send = XMLHttpRequest.prototype.send
    XMLHttpRequest.prototype.send = function() { 
        this.addEventListener('load', function() {
            console.log('global handler', this.responseText)
            // add your global handler here
        })
        return send.apply(this, arguments)
    }
})()

正如 cmets 中所述，这不会涵盖 fetch API。

【讨论】：

注意：这将导致您的load 处理程序在任何load 和我假设readystate 页面已经添加的处理程序之后被调用 .对于这个问题，它似乎并不重要，但在其他一些情况下它会。如果您希望确保首先调用您的处理程序，则需要覆盖 XMLHttpRequest 构造函数。