Web ページ上のすべての AJAX リクエストをインターセプトするにはどうすればよいでしょうか?

ページ上のすべての AJAX リクエストへのフック

追加のアクションを実行するために AJAX リクエストを変更することは、デバッグ、分析、またはその他の目的で重要になる場合があります。 。ただし、ページ上で異なる AJAX ライブラリを使用する複数のサードパーティ スクリプトがある場合、それらをすべてインターセプトするのは困難に見える場合があります。

AJAX リクエストのインターセプト

すべての AJAX を監視するにはリクエストを行うには、XMLHttpRequest オブジェクトを利用できます。複数のライブラリでも機能する堅牢なソリューションを次に示します。

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

このコードは、XMLHttpRequest の open メソッドをオーバーライドして、load イベントのイベント リスナーを登録します。リクエストが開始されると、開始時刻が記録されます。リクエストが完了すると、終了時刻、準備完了状態、および応答テキストが記録されます。

注: このメソッドはネイティブのフェッチ リクエストでは機能しないことに注意してください。ただし、必要に応じて、フェッチに同様のプロキシ アプローチを採用できます。

以上がWeb ページ上のすべての AJAX リクエストをインターセプトするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。