如何使用自定义操作拦截页面上的所有 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中文网其他相关文章！