如何攔截網頁上的 AJAX 請求以執行自訂操作？

如何掛鉤網頁上的 AJAX 請求

攔截網頁上的 AJAX 請求允許開發人員在發送請求或處理來自伺服器的回應之前執行自訂操作。這對於記錄、修改請求或增強安全性非常有用。

使用事件監聽器

掛鉤 AJAX 請求的一種方法是使用事件監聽器。透過將事件偵聽器附加到 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() 方法，為每個請求附加一個load 事件監聽器。當啟動AJAX請求時，會觸發load事件，並執行指定的回呼函數。

透過使用事件監聽器，開發者可以根據事件類型執行各種操作。例如，他們可以記錄請求詳細資訊、修改請求標頭或處理回應資料。

相容性說明

大多數現代都支援事件偵聽器方法瀏覽器，包括 Chrome、Firefox 和 Edge。但是，它可能無法在舊版的 Internet Explorer (IE) 中正常運作，並且不支援本機 fetch API 請求。

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