JavaScript:检测AJAX请求

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript:检测AJAX请求相关的知识,希望对你有一定的参考价值。

有没有办法在使用通用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

以上是关于JavaScript:检测AJAX请求的主要内容,如果未能解决你的问题,请参考以下文章

控制器无法检测到 ajax 请求

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

Thymeleaf - 如何交互和重新加载 Javascript?

Javascript代码片段在drupal中不起作用

检测由AJAX请求调用的Iframe的滚动事件

执行AJAX返回HTML片段中的JavaScript脚本