拦截XMLHttpRequest并修改responseText

Intercept XMLHttpRequest and modify responseText

本文关键字：responseText 修改 XMLHttpRequest 拦截      更新时间：2023-09-26

我正在尝试构建一个脚本，将充当本机XMLHttpRequest对象的代理/包装器，使我能够拦截它，修改responseText并返回到原始的onreadystatechange事件。

上下文是，如果应用程序试图接收的数据已经在本地存储中可用，终止XMLHttpRequest并将本地存储的数据传递回应用程序的成功/失败回调方法。假设我无法控制应用程序现有的AJAX回调方法。

我最初尝试过下面的想法…

var send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(data){
   //Do some stuff in here to modify the responseText
   send.call(this, data);
};

但是正如我现在所建立的，responseText是只读的。

然后我试着后退一步，为XMLHttpRequest编写我自己的完整本机代理，最终结束编写我自己版本的本机方法。与这里讨论的内容类似……

http://www.ilinsky.com/articles/XMLHttpRequest/implementation-wrapping

但是它很快变得混乱，并且仍然难以将修改后的数据返回到原始的onReadyStateChange方法中。

有什么建议吗?这可能吗?

//
// firefox, ie8+ 
//
var accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText');
Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {
	get: function() {
		console.log('get responseText');
		return accessor.get.call(this);
	},
	set: function(str) {
		console.log('set responseText: %s', str);
		//return accessor.set.call(this, str);
	},
	configurable: true
});
//
// chrome, safari (accessor == null)
//
var rawOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
	if (!this._hooked) {
		this._hooked = true;
		setupHook(this);
	}
	rawOpen.apply(this, arguments);
}
function setupHook(xhr) {
	function getter() {
		console.log('get responseText');
		delete xhr.responseText;
		var ret = xhr.responseText;
		setup();
		return ret;
	}
	function setter(str) {
		console.log('set responseText: %s', str);
	}
	function setup() {
		Object.defineProperty(xhr, 'responseText', {
			get: getter,
			set: setter,
			configurable: true
		});
	}
	setup();
}

下面的脚本在通过XMLHttpRequest.prototype.send发送之前完美地拦截了数据

<script>
(function(send) { 
        XMLHttpRequest.prototype.send = function(data) { 
            this.addEventListener('readystatechange', function() { 
            }, false); 
            console.log(data); 
            alert(data); 
        }; 
})(XMLHttpRequest.prototype.send);
</script>

您的后退一步是多余的:您可以在XMLHttpRequest上添加自己的getter:(更多关于属性)

Object.defineProperty(XMLHttpRequest.prototype,"myResponse",{
  get: function() {
    return this.responseText+"my update"; // anything you want
  }
});

用法:

var xhr = new XMLHttpRequest();
...
console.log(xhr.myResponse); // xhr.responseText+"my update"

注意在现代浏览器上您可以运行xhr.onload(参见XMLHttpRequest2提示)

相关文章：