猴子补丁 XMLHTTPRequest.onreadystatechange

2022-01-15 00:00:00 xmlhttprequest monkeypatching javascript ajax

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

How would go about monkey patching the XMLHTTPRequest's onreadystatechange function. I'm trying to add a function that would be called when every ajax request made from a page come back.

我知道这听起来很糟糕，但用例却很奇特.我想将某个 SDK 与控制台 (jqconsole) 一起使用，但在控制台中显示 ajax 调用的状态和结果，而无需修改外部 SDK.

I know this sounds like a terrible idea, but the use case is quite peculiar. I want to use a certain SDK with a console (jqconsole) but show status and results from ajax calls within the console without modifying the external SDK.

我查看了 这篇文章，其中包含大量信息，但没有任何内容猴子修补回调似乎超出了我的 JavaScript 技能.

I've looked at this post which had great info, but nothing on monkey patching the callback which seem to exceed my JavaScript skills.

P.S 不能使用 jQuery，因为它只支持由 jQuery 而不是直接来自 XMLHTTPRequests 的 ajax 调用，这里就是这种情况.

P.S Can't use jQuery since it only supports ajax calls made from jQuery not from XMLHTTPRequests directly which is the case here.

推荐答案

要猴子补丁XMLHttpRequest，你需要知道一个AJAX请求一般是如何构造的:

To monkey-patch XMLHttpRequests, you need to know how an AJAX request is generally constructed:

  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 处理程序.为简单起见，我没有包含 其他事件的代码，例如加载.另外，我没有考虑使用 addEventListener 添加的事件.

The previous assumed that onreadystatechange was assigned to the onreadystatechange handler. For simplicity, I didn't include the code for other events, such as onload. Also, I did not account for events added using addEventListener.

之前的补丁针对所有请求运行.但是，如果您只想将补丁限制为特定请求怎么办?具有特定 URL 或异步标志和特定请求正文的请求?

The previous patch runs for all requests. But what if you want to limit the patch to a specific request only? A request with a certain URL or async flag and a specific request body?

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

Example: Intercepting all POST requests whose request body contains "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);

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

The main techniques used is the transparent rewrite using...

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

我的示例非常基本，可以扩展以满足您的确切愿望.不过，这取决于您.

My examples are very basic, and can be extended to meet your exact wishes. That's up to you, however.

相关文章