XMLHttpRequestを傍受してresponseTextを変更します

Question

ネイティブのXMLHttpRequestオブジェクトのプロキシ/ラッパーとして機能するスクリプトを作成して、それを傍受してresponseTextを修正し、元のonreadystatechangeイベントに戻すことができます。

を中止し、アプリケーションの成功/失敗のコールバックメソッドにローカルに保存されたデータを戻すために、アプリケーションが受信しようとしているデータがローカルストレージですでに利用可能な場合は、コンテキストになります。私は、既存の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方法に変更されたデータを返すことの難しさを持っています。

提案がありますか？これも可能ですか？

Answer 1

// 
 
// firefox, ie8+ 
 
// 
 
var accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText'); 
 

 
Object.defineProperty(XMLHttpRequest.prototype, 'responseText', { 
 
\t get: function() { 
 
\t \t console.log('get responseText'); 
 
\t \t return accessor.get.call(this); 
 
\t }, 
 
\t set: function(str) { 
 
\t \t console.log('set responseText: %s', str); 
 
\t \t //return accessor.set.call(this, str); 
 
\t }, 
 
\t configurable: true 
 
}); 
 

 

 
// 
 
// chrome, safari (accessor == null) 
 
// 
 
var rawOpen = XMLHttpRequest.prototype.open; 
 

 
XMLHttpRequest.prototype.open = function() { 
 
\t if (!this._hooked) { 
 
\t \t this._hooked = true; 
 
\t \t setupHook(this); 
 
\t } 
 
\t rawOpen.apply(this, arguments); 
 
} 
 

 
function setupHook(xhr) { 
 
\t function getter() { 
 
\t \t console.log('get responseText'); 
 

 
\t \t delete xhr.responseText; 
 
\t \t var ret = xhr.responseText; 
 
\t \t setup(); 
 
\t \t return ret; 
 
\t } 
 

 
\t function setter(str) { 
 
\t \t console.log('set responseText: %s', str); 
 
\t } 
 

 
\t function setup() { 
 
\t \t Object.defineProperty(xhr, 'responseText', { 
 
\t \t \t get: getter, 
 
\t \t \t set: setter, 
 
\t \t \t configurable: true 
 
\t \t }); 
 
\t } 
 
\t setup(); 
 
}

Answer 2

あなたのステップバックはやり過ぎです：あなたは、XMLHttpRequestの上で、独自のゲッターを追加する可能性があります。（more about properties）

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 tips参照）

Answer 3

次のスクリプトは、データを完全に代行受信します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>