14

ネイティブ オブジェクトのプロキシ/ラッパーとして機能するスクリプトを作成しようとしています。これにより、ネイティブ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しかし、それは急速に混乱を招き、変更されたデータを元のメソッドに戻すことは依然として困難です。

助言がありますか？これは可能ですか？

4

3 に答える 3

7 

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

于 2015-02-14T06:43:40.483 に答える
0

あなたのステップバックはやり過ぎです: XMLHttpRequest に独自のゲッターを追加することができます: (プロパティについての詳細)

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 のヒントを参照)

于 2013-06-06T10:23:44.943 に答える