JavaScript：检测AJAX请求

Posted 2021-04-20

有没有办法在使用通用javascript（而不是框架）的网页上检测全局AJAX调用（特别是响应）？

我已经在StackOverflow上查看了问题“JavaScript detect an AJAX event”，并尝试将接受的答案代码修补到我的应用程序中，但它没有用。我之前从未对AJAX做过任何事情，我不知道修改它是否有效。

我不需要任何花哨的东西，我只需要检测所有（具体的，实际上，但我必须首先检测所有并从那里开始）AJAX响应并将它们修补到IF语句中以供使用。所以，最终，我想要像：

if (ajax.response == "certainResponseType"){
    //Code
}

， 例如。

更新：似乎我应该澄清我不是在尝试发送请求 - 我正在开发一个内容脚本，我需要能够检测到网页的AJAX请求（不是我自己的），所以我可以执行一个检测到响应时起作用。

答案

这可能有点棘手。这个怎么样？

var _send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

    /* Wrap onreadystaechange callback */
    var callback = this.onreadystatechange;
    this.onreadystatechange = function() {             
         if (this.readyState == 4) {
             /* We are in response; do something,
                like logging or anything you want */
         }
         callback.apply(this, arguments);
    }

    _send.apply(this, arguments);
}

我没有测试它，但看起来或多或少都不错。

请注意，如果您使用框架（如jQuery），它可能无法工作，因为它们可能在调用onreadystatechange后重写send（我认为jQuery会这样做）。或者他们可以覆盖send方法（但这不太可能）。所以这是一个部分解决方案。

编辑：如今（2018年初），the new fetch API变得更加复杂。全局fetch函数也必须以类似的方式被覆盖。

另一答案

以下是一些代码（通过粘贴到Chrome 31.0.1650.63的控制台进行测试），用于捕获和记录或以其他方式处理ajax请求及其响应：

(function() {
    var proxied = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        console.log( arguments );
        //Here is where you can add any code to process the request. 
        //If you want to pass the Ajax request object, pass the 'pointer' below
        var pointer = this
        var intervalId = window.setInterval(function(){
                if(pointer.readyState != 4){
                        return;
                }
                console.log( pointer.responseText );
                //Here is where you can add any code to process the response.
                //If you want to pass the Ajax request object, pass the 'pointer' below
                clearInterval(intervalId);

        }, 1);//I found a delay of 1 to be sufficient, modify it as you need.
        return proxied.apply(this, [].slice.call(arguments));
    };


})();

此代码使用已接受的答案解决了上述问题：

请注意，如果您使用框架（如jQuery），它可能无法工作，因为它们可能在调用send后重写onreadystatechange（我认为jQuery会这样做）。或者他们可以覆盖send方法（但这不太可能）。所以这是一个部分解决方案。

因为它不依赖于'onreadystatechange'回调未被更改，而是监视'readyState'本身。

我从这里改编了答案：https://stackoverflow.com/a/7778218/1153227

另一答案

试一试。检测Ajax响应，然后我使用XMLHttpRequest propoerties readyState＆status添加条件，以便在响应状态= OK时运行函数

var oldXHR = window.XMLHttpRequest;

function newXHR() {
    var realXHR = new oldXHR();
    realXHR.addEventListener("readystatechange", function() {
        if(realXHR.readyState==4 && realXHR.status==200){
            afterAjaxComplete() //run your code here
        }
    }, false);
    return realXHR;
}
window.XMLHttpRequest = newXHR;

修改自：Monitor all JavaScript events in the browser console