web-dev-qa-db-ja.com

JavaScript：AJAXリクエストを検出

（フレームワークではなく）汎用JavaScriptを使用したWebページで、グローバルAJAX呼び出し（特に応答））を検出する方法はありますか？

私はすでに質問「 JavaScriptはAJAXイベント を検出しました」をStackOverflowで確認し、受け入れられた回答のコードを自分のアプリケーションにパッチしようとしましたが、動作します。AJAXを使って何かをしたことがないので、動作するように変更するのに十分な知識がありません。

派手なものは必要ありません。すべてを検出する必要があります（具体的には、実際にはすべてを検出し、そこから先に進む必要があります）AJAX応答とIFへのパッチ適用だから、最終的に、私は次のようなものが欲しいです：

if (ajax.response == "certainResponseType"){
    //Code
}

、 例えば。

更新：リクエストを送信しようとしていないことを明確にする必要があるようです-コンテンツスクリプトを開発していますが、できるようにする必要がありますdetectWebページのAJAX要求（自分で作成しない））であるため、応答が検出されたときに関数を実行できます。

javascriptajaxrequestcall
31
mythofechelon

Ajaxリクエストとそのレスポンスをキャッチしてログに記録する、または処理するためのコード（Chrome 31.0.1650.63のコンソールに貼り付けてテスト））：

(function() {
    var proxied = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        console.log( arguments );
        //Here is where you can add any code to process the request. 
        //If you want to pass the Ajax request object, pass the 'pointer' below
        var pointer = this
        var intervalId = window.setInterval(function(){
                if(pointer.readyState != 4){
                        return;
                }
                console.log( pointer.responseText );
                //Here is where you can add any code to process the response.
                //If you want to pass the Ajax request object, pass the 'pointer' below
                clearInterval(intervalId);

        }, 1);//I found a delay of 1 to be sufficient, modify it as you need.
        return proxied.apply(this, [].slice.call(arguments));
    };


})();

このコードは、受け入れられた答えで上記の問題を解決します。

フレームワーク（jQueryなど）を使用すると、sendの呼び出し後にonreadystatechangeがオーバーライドされる可能性があるため、機能しない場合があることに注意してください（jQueryはそう思う）。または、sendメソッドをオーバーライドできます（ただし、これはほとんどありません）。したがって、それは部分的な解決策です。

これは、変更されていない「onreadystatechange」コールバックに依存せず、「readyState」自体を監視するためです。

私はここから答えを適応させました： https://stackoverflow.com/a/7778218/1153227

31
Omn

これには少し注意が必要です。これはどう？

var _send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

    /* Wrap onreadystaechange callback */
    var callback = this.onreadystatechange;
    this.onreadystatechange = function() {             
         if (this.readyState == 4) {
             /* We are in response; do something,
                like logging or anything you want */
         }
         callback.apply(this, arguments);
    }

    _send.apply(this, arguments);
}

私はそれをテストしませんでしたが、多かれ少なかれうまく見えます。

フレームワーク（jQueryなど）を使用すると、onreadystatechangeを呼び出した後にsendをオーバーライドする可能性があるため、動作しない場合があることに注意してください（jQueryはそう思う）。または、sendメソッドをオーバーライドできます（ただし、これはほとんどありません）。したがって、それは部分的な解決策です。

EDIT：最近（2018年の初め）、これは 新しいフェッチAPI でより複雑になります。グローバルfetch関数も同様の方法でオーバーライドする必要があります。

21
freakish

これを試してみてください。 Ajax応答を検出し、応答ステータス= OKの場合にXMLHttpRequestプロパティreadyStateとステータスを使用して関数を実行する条件を追加しました

var oldXHR = window.XMLHttpRequest;

function newXHR() {
    var realXHR = new oldXHR();
    realXHR.addEventListener("readystatechange", function() {
        if(realXHR.readyState==4 && realXHR.status==200){
            afterAjaxComplete() //run your code here
        }
    }, false);
    return realXHR;
}
window.XMLHttpRequest = newXHR;

変更元： ブラウザコンソールですべてのJavaScriptイベントを監視

20
mmguy