如何使用自訂操作攔截頁面上的所有 AJAX 請求？

使用自訂操作攔截頁面上的所有AJAX 請求

問：是否可以「掛鉤」頁面上的所有AJAX 請求，無論是在發送之前還是在活動期間，執行自訂操作？

答：是的，可以透過以下方法實現：

攔截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、新增附加標頭或修改請求資料。

第三方腳本

此方法甚至適用於使用jQuery 或其他AJAX 函式庫的第三方腳本，因為我們正在攔截所有AJAX 實作都使用的底層XMLHttpRequest 物件。但是，請務必注意，此方法可能不適用於本機 fetch API。

其他資源

有關用於處理AJAX 事件的addEventListener API 的更多信息，請參閱至：https://developer.mozilla.org/en- US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

瀏覽器支援

此方法確實不適用於Internet Explorer 8 或更早版本。

以上是如何使用自訂操作攔截頁面上的所有 AJAX 請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！