How Can You Intercept All AJAX Requests on a Web Page?

Hooking into All AJAX Requests on a Page

Modifying AJAX requests to perform additional actions can be crucial for debugging, analytics, or other purposes. However, with multiple third-party scripts using different AJAX libraries on a page, it can seem challenging to intercept them all.

Intercepting AJAX Requests

To monitor every AJAX request, you can utilize the XMLHttpRequest object. Here's a robust solution that works even with multiple libraries:

(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);
    };
})();

This code overrides the open method of XMLHttpRequest to register an event listener for the load event. When a request is initiated, it logs the start time. When the request completes, it logs the end time, ready state, and response text.

Note: Keep in mind that this method does not work for native fetch requests. However, you can adopt a similar proxying approach for fetch if necessary.

The above is the detailed content of How Can You Intercept All AJAX Requests on a Web Page?. For more information, please follow other related articles on the PHP Chinese website!