カスタム アクションのために Web ページ上の AJAX リクエストをインターセプトするにはどうすればよいですか?

Web ページで AJAX リクエストをフックする方法

Web ページで AJAX リクエストをインターセプトすると、開発者はリクエストを送信したり、サーバーからの応答を処理したりする前にカスタム アクションを実行できます。 。これは、リクエストのログ記録、変更、またはセキュリティの強化に役立ちます。

イベント リスナーの使用

AJAX リクエストにフックする 1 つの方法は、イベント リスナーを使用することです。イベント リスナーを XMLHttpRequest オブジェクトにアタッチすると、開発者は「load」や「readystatechange」などのイベントをキャプチャし、リクエストのステータスに基づいてアクションを実行できます。次のコード スニペットは、すべての AJAX リクエストを監視するイベント リスナーを追加する方法を示しています。

(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() メソッドがオーバーライドされ、各リクエストにロード イベント リスナーがアタッチされます。 。 AJAX リクエストが開始されると、load イベントがトリガーされ、指定されたコールバック関数が実行されます。

イベント リスナーを使用することで、開発者はイベント タイプに基づいてさまざまなアクションを実行できます。たとえば、リクエストの詳細をログに記録したり、リクエスト ヘッダーを変更したり、応答データを処理したりできます。

互換性に関する注意

イベント リスナーのアプローチは、最新のシステムでサポートされています。 Chrome、Firefox、Edge などのブラウザ。ただし、古いバージョンの Internet Explorer (IE) では正しく動作しない可能性があり、ネイティブのフェッチ API リクエストはサポートされていません。

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