41

一般的な JavaScript (フレームワークではなく) を使用して Web ページでグローバル AJAX 呼び出し (特に応答) を検出する方法はありますか?

ここStackOverflowで「 JavaScriptはAJAXイベントを検出する」という質問をすでに確認し、受け入れられた回答のコードをアプリケーションにパッチしようとしましたが、うまくいきませんでした。私はこれまでAJAXで何もしたことがないので、それを修正して機能させるのに十分な知識がありません。

派手なものは必要ありません。すべてを検出する必要があります (実際には具体的ですが、最初にすべてを検出してそこから移動する必要があります) AJAX 応答を IF ステートメントにパッチして使用します。したがって、最終的には、次のようなものが必要です。

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

、 例えば。

更新: リクエストを送信しようとしているわけではないことを明確にする必要があるようです。応答が検出されたときに機能します。

4

4 に答える 4

44

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


})();

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

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

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

ここからの回答を適応させました: https://stackoverflow.com/a/7778218/1153227

于 2013-12-21T02:26:12.497 に答える
21

これは少し難しいかもしれません。これはどう？

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

私はそれをテストしませんでしたが、多かれ少なかれ問題ないようです。

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

編集:最近 (2018 年の初め)、これは新しい fetch APIでより複雑になります。グローバルfetch関数も同様にオーバーライドする必要があります。

于 2012-05-28T11:06:41.970 に答える