在纯JavaScript中ajaxComplete [英] ajaxComplete in pure JavaScript

问题描述

使用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）; 
} 
} 
}）; 
} 
  

这可能吗？

解决方案

更新

如果您正在编写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这里
}）
返回send.apply（this，arguments）
} 
}）（）
  

正如评论所述，这不会涵盖 fetch API。

I am building a chrome extension using Content Script.

I have a piece of code that injects DOM elements upon success of all ajax request on the page using jQuery. How can you recreate this without jQuery? Please note that I cannot modify any ajax requests on the page.

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);
        }
    }
});
}

Is this possible?

解决方案

Update

If you're writing a Chrome extension, you should probably use the chrome.webRequest API. See https://developer.chrome.com/extensions/webRequest

---

You can override one of the existing methods required to make an AJAX request such as XMLHttpRequest.prototype.send to add your own load event listener. For example

(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)
    }
})()

As mentioned in the comments, this won't cover the fetch API.

这篇关于在纯JavaScript中ajaxComplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！