カスタム アクションを使用してページ上のすべての AJAX リクエストをインターセプトする方法

カスタム アクションを使用したページ上のすべての AJAX リクエストのインターセプト

Q: ページ上のすべての AJAX リクエストを「フック」することは可能ですか?送信前またはイベント中にカスタム アクションを実行するには?

A: はい、次のアプローチで可能です:

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

ページ上のすべての AJAX リクエストをインターセプトするには、リクエストの開始に使用される XMLHttpRequest オブジェクトの open() メソッドをオーバーライドします。 open() メソッドをインターセプトすることで、リクエストが送信される前にカスタム アクションを実行できます。

AJAX リクエストをインターセプトするコードは次のとおりです:

<code class="js">(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);
    };
})();</code>

上記のコードを実行すると、リクエスト URL のログ記録、ヘッダーの追加、リクエスト データの変更など、必要なアクションを実行できます。

サードパーティ スクリプト

このアプローチは、すべての AJAX 実装で使用される基盤となる XMLHttpRequest オブジェクトをインターセプトするため、jQuery またはその他の AJAX ライブラリを使用するサードパーティ スクリプト。ただし、このアプローチはネイティブのフェッチ API では機能しない可能性があることに注意することが重要です。

追加リソース

AJAX イベントを処理するための addEventListener API の詳細については、以下を参照してください。 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

ブラウザのサポート

このアプローチでは、 Internet Explorer 8 以前では動作しません。

以上がカスタム アクションを使用してページ上のすべての AJAX リクエストをインターセプトする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。