猴补丁XMLHTT prequest.onreadystatechange [英] Monkey patch XMLHTTPRequest.onreadystatechange
问题描述
怎么会去猴子修补 XMLHTT prequest 的的onreadystatechange 功能。我想补充一个，将被调用时，每一个Ajax请求的页面做回来功能。
我知道这听起来像一个可怕的想法，但使用情况还是比较奇特。我想用一个特定的SDK与控制台（jqconsole），但显示状态和结果从控制台内的Ajax调用，而无需修改外部SDK。
我已经看了这个帖子其中有伟大的信息，但没有对猴子打补丁，这似乎超出我的JavaScript技术回调。
PS无法使用jQuery，因为它仅支持从jQuery的做Ajax调用不是从 XMLHTT prequests 直接是这里的情况。
要猴子补丁 XMLHtt prequest S，你需要知道如何在Ajax请求一般构造：
- 构造函数调用
- preparation的要求（
setRequestHeader（），的open（）） - 发送请求（
。发送）。
通用补丁
（功能（XHR）{
功能香蕉（xhrInstance）{//例
的console.log（'猴RS：'+ xhrInstance.readyState）;
}
//捕获请求之前，任何网络活动发生：
VAR发送= xhr.send;
xhr.send =功能（数据）{
VAR RSC = this.onreadystatechange;
如果（RSC）{
//的onreadystatechange的存在。猴打补丁
this.onreadystatechange =功能（）{
香蕉（本）;
返回rsc.apply（这一点，参数）;
};
}
返回send.apply（这一点，参数）;
};
}）（XMLHtt prequest.prototype）;
在previous假设的onreadystatechange 被分配到的onreadystatechange 处理程序。为简单起见，我并没有包括在$ C $下其他活动，如的onload 。另外，我没有添加使用占事件的的addEventListener 。
在previous补丁运行的所有请求。但是，如果你想限制的补丁，只有特定的要求吗？具有一定的URL或异步的标志和一个特定的请求主体的请求？
条件猴子补丁
例：拦截所有 POST 请求的请求体中包含TEST
（功能（XHR）{
功能香蕉（xhrInstance）{//例
的console.log（'猴RS：'+ xhrInstance.readyState）;
}
//
VAR开放= xhr.open;
xhr.open =函数（方法，URL，异步）{
//测试，如果方法是POST
如果（/^POST$/i.test(method））{
VAR发送= this.send;
this.send =功能（数据）{
//测试，如果请求主体中包含TEST
如果（typeof运算数据==='串'和;＆安培; data.indexOf（TEST）＆GT; = 0）{
VAR RSC = this.onreadystatechange;
如果（RSC）{
//应用猴子补丁
this.onreadystatechange =功能（）{
香蕉（本）;
返回rsc.apply（这一点，参数）;
};
}
}
返回send.apply（这一点，参数）;
};
}
返回open.apply（这一点，参数）;
};
}）（XMLHtt prequest.prototype）;
使用的主要技术是使用透明的重写......
VAR原= xhr.method;
xhr.method =功能（）{
/*...*/;
返回original.apply（这一点，参数）;
};
我的例子是非常基本的，并且可以扩展，满足您的愿望。这是给你的，但是。
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.
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.
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 Can't use jQuery since it only supports ajax calls made from jQuery not from XMLHTTPRequests directly which is the case here.
To monkey-patch XMLHttpRequests, you need to know how an AJAX request is generally constructed:
- Constructor invocation
- Preparation the request (
setRequestHeader(),open()) - Sending the request (
.send).
General-purpose patch
(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);
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.
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?
Conditional monkey-patch
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.
这篇关于猴补丁XMLHTT prequest.onreadystatechange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
