問題描述

我正在嘗試構建一個腳本，它將充當本機 XMLHttpRequest 對象的代理/包裝器，使我能夠攔截它、修改 responseText 并返回到原始的 onreadystatechange 事件.

I'm trying to build a script that will act as a proxy/wrapper for the native XMLHttpRequest object enabling me to intercept it, modify the responseText and return back to the original onreadystatechange event.

上下文是，如果應用程序嘗試接收的數據已經在本地存儲中可用，則中止 XMLHttpRequest 并將本地存儲的數據傳遞回應用程序的成功/失敗回調方法.假設我無法控制應用現有的 AJAX 回調方法.

The context being, if the data the app is trying to receive is already available in local storage, to abort the XMLHttpRequest and pass the locally stored data back into the apps success/failure callback methods. Assume I have no control over the apps existing AJAX callback methods.

我最初嘗試了以下想法..

I had originally tried the following idea..

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

但正如我現在所建立的，responseText 是只讀的.

But as I have now established, the responseText is read only.

然后我嘗試退后一步，為 XMLHttpRequest 編寫我自己的完整本機代理，最終編寫了我自己的本機方法版本.類似于這里討論的...

I then tried taking a step back, writing my own full native proxy to XMLHttpRequest, ultimately ending up writing my own version of the native methods. Similar to what is discussed here...

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

但它很快就變得混亂了，并且仍然很難將修改后的數據返回到原始的 onReadyStateChange 方法中.

But it rapidly got confusing, and still have the difficulty of returning the modified data back into the original onReadyStateChange method.

有什么建議嗎?這甚至可能嗎?

Any suggestions? Is this even possible?

推薦答案

//
// 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 并修改 responseText的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！