这是我喜欢采用的方法;请注意,掌握 XHR 猴子补丁的黑暗艺术是一种艺术形式。
将整个套件和一堆堆放在一个 IIFE 中。因此,请从以下内容开始:
(function(open, send) {
//...overrides of the XHR open and send methods are now encapsulated within a closure
})(XMLHttpRequest.prototype.open, XMLHttpRequest.prototype.send)
可以使用这种通用方法覆盖任何方法,但是上面的脚手架为您提供了一种覆盖(又名猴子补丁)XMLHttpRequest 的 open 和 send 方法的方法;在一个简洁的效用函数中。请注意“基本”方法(来自 API 的原型对象)如何被输入 IIFE 并分配给 var 的“open”和“send”,并安全地限定在功能块的范围内。
现在来看看胆量和坚持猴子补丁的关键是什么。再说一次,这就是我的做法,而且效果很好。
一般模式(都在 IIFE 范围内)是:
1) 复制方法及其参数(签名,完整,每个规范/原型),
2) 滑入你的模组,并且
3) 将您的 mod 应用到 XHR 原型属性,以确保所有 XHR 请求都通过您的代码。
例如,“打开”看起来像:
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
xhrOpenRequestUrl = url; // update request url, closure variable
open.apply(this, arguments); // reset/reapply original open method
};
不要挂断 xhrOpenRequestUrl = url;行,此代码是从我需要 url 以供以后处理的示例中复制的。关键点是“open.apply”,它将您的调整巩固到 XHR open 方法中,如果您不熟悉“apply”方法或“arguments”对象,那么现在是学习它们的好时机.
同样对于“发送”方法...
XMLHttpRequest.prototype.send = function(data) {
//...what ever code you need, i.e. capture response, etc.
if (this.readyState == 4 && this.status >= 200 && this.status < 300) {
xhrSendResponseUrl = this.responseURL;
responseData = this.data; // now you have the data, JSON or whatever, hehehe!
}
send.apply(this, arguments); // reset/reapply original send method
}
同样,“应用”很关键,必须在所有覆盖之后完成。所以现在把它们放在一起......
(function(open, send) {
// Closure/state var's
var xhrOpenRequestUrl; // captured in open override/monkey patch
var xhrSendResponseUrl; // captured in send override/monkey patch
var responseData; // captured in send override/monkey patch
//...overrides of the XHR open and send methods are now encapsulated within a closure
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
xhrOpenRequestUrl = url; // update request url, closure variable
open.apply(this, arguments); // reset/reapply original open method
};
XMLHttpRequest.prototype.send = function(data) {
//...what ever code you need, i.e. capture response, etc.
if (this.readyState == 4 && this.status >= 200 && this.status < 300) {
xhrSendResponseUrl = this.responseURL;
responseData = this.data; // now you have the data, JSON or whatever, hehehe!
}
send.apply(this, arguments); // reset/reapply original send method
}
})(XMLHttpRequest.prototype.open, XMLHttpRequest.prototype.send)
哦,最后一件事,您的猴子补丁可以反过来进行猴子补丁!为了尽量减少这种可能性,IIFE 代码应该位于页面中所有其他 JS 之后。至少所有可能与 XHR 发生冲突的 JS,但在您可能针对的任何 AJAX 调用之前。此外,同样地,可以通过 Chrome 或 Web 扩展注入 XHR 猴子补丁,并覆盖您的覆盖!哈!
希望对您有所帮助!