向页面上的所有 AJAX 请求添加“挂钩”

2022-08-30 04:39:21

我想知道是否有可能“挂接”到每个AJAX请求(无论是在即将发送时,还是在事件上)并执行操作。在这一点上,我假设页面上还有其他第三方脚本。其中一些可能使用jQuery,而另一些则不使用。这可能吗?


答案 1

注意:接受的答案不会产生实际的响应,因为它被调用得太早。

您可以这样做,这将通常全局拦截任何AJAX,而不会搞砸任何可能由任何第三方AJAX库分配的任何回调等。

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

以下是使用 addEventListener API 可以执行的操作的更多文档:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

(请注意,这不起作用<= IE8)


答案 2

受到aviv的答案的启发,我做了一些调查,这就是我想到的。
我不确定它是否像脚本中的注释那样有用,当然只适用于使用本机XMLHttpRequest对象的浏览器
我认为如果使用javascript库,它将起作用,因为如果可能的话,它们将使用本机对象。

function addXMLRequestCallback(callback){
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function(){
            // process the callback queue
            // the xhr instance is passed into each callback but seems pretty useless
            // you can't tell what its destination is or call abort() without an error
            // so only really good for logging that a request has happened
            // I could be wrong, I hope so...
            // EDIT: I suppose you could override the onreadystatechange handler though
            for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                XMLHttpRequest.callbacks[i]( this );
            }
            // call the native send()
            oldSend.apply(this, arguments);
        }
    }
}

// e.g.
addXMLRequestCallback( function( xhr ) {
    console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
    console.dir( xhr ); // have a look if there is anything useful here
});