猴子补丁XMLHTTPRequest.onreadystatechange

Question

如何修补猴子XMLHTTPRequest的onreadystatechange功能.我正在尝试添加一个函数,当从页面发出的每个ajax请求返回时,将调用该函数.

我知道这听起来像一个可怕的想法,但用例非常奇特.我想在控制台(jqconsole)中使用某个SDK,但在控制台内显示ajax调用的状态和结果,而不修改外部SDK.

我看过这篇文章有很多信息,但猴子修补回调似乎超出了我的JavaScript技能.

PS不能使用jQuery,因为它只支持从jQuery调用的jjj调用,而不是XMLHTTPRequests直接来自这里的情况.

Answer 1

对于monkey-patch XMLHttpRequest,你需要知道一般是如何构造一个AJAX请求:

1. 构造函数调用
2. 准备请求(setRequestHeader(),open())
3. 发送请求(.send).

通用补丁

(function(xhr) {
    function banana(xhrInstance) { // Example
        console.log('Monkey RS: ' + xhrInstance.readyState);
    }
    // Capture request before any network activity occurs:
    var send = xhr.send;
    xhr.send = function(data) {
        var rsc = this.onreadystatechange;
        if (rsc) {
            // "onreadystatechange" exists. Monkey-patch it
            this.onreadystatechange = function() {
                banana(this);
                return rsc.apply(this, arguments);
            };
        }
        return send.apply(this, arguments);
    };
})(XMLHttpRequest.prototype);

先前假定onreadystatechange已分配给onreadystatechange处理程序.为简单起见,我没有包含其他事件的代码,例如onload.另外,我没有说明使用添加的事件addEventListener.

以前的补丁适用于所有请求.但是,如果您只想将补丁限制为特定请求,该怎么办？具有特定URL或异步标志和特定请求正文的请求？

有条件的猴子补丁

示例:拦截POST请求正文包含"TEST"的所有请求

(function(xhr) {
    function banana(xhrInstance) { // Example
        console.log('Monkey RS: ' + xhrInstance.readyState);
    }
    // 
    var open = xhr.open;
    xhr.open = function(method, url, async) {
        // Test if method is POST
        if (/^POST$/i.test(method)) {
            var send = this.send;
            this.send = function(data) {
                // Test if request body contains "TEST"
                if (typeof data === 'string' && data.indexOf('TEST') >= 0) {
                    var rsc = this.onreadystatechange;
                    if (rsc) {
                        // Apply monkey-patch
                        this.onreadystatechange = function() {
                            banana(this);
                            return rsc.apply(this, arguments);
                        };
                    }
                }
                return send.apply(this, arguments);
            };
        }
        return open.apply(this, arguments);
    };
})(XMLHttpRequest.prototype);

使用的主要技术是透明重写使用...

var original = xhr.method; 
xhr.method = function(){
    /*...*/;
    return original.apply(this, arguments);
};

我的示例非常基础,可以扩展以满足您的确切愿望.但是,这取决于你.