javascript - 拦截 XMLHttpRequest 并修改 responseText

Question

我正在尝试构建一个脚本，该脚本将充当 native 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 是只读的。

然后我尝试退后一步，将我自己的完整 native 代理编写到 XMLHttpRequest，最终编写了我自己版本的 native 方法。类似于这里讨论的...

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

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

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

Answer 1

//
// 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();
}