Add a “hook” to all AJAX requests on a page

by

NOTE: The accepted answer does not yield the actual response because it is getting called too early.

You can do this which will generically intercept any AJAX globally and not screw up any callbacks etc. that maybe have been assigned by any third party AJAX 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);
    };
})();

Some more docs of what you can do here with the addEventListener API here:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

(Note this doesn’t work <= IE8)

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  3. Upload file with Ajax XMLHttpRequest
  4. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  5. What is the cleanest way to get the progress of JQuery ajax request?
  6. Prevent redirection of Xmlhttprequest
  7. XMLHttpRequest status 0 (responseText is empty)
  8. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  9. Is onload equal to readyState==4 in XMLHttpRequest?
  10. What do the different readystates in XMLHttpRequest mean, and how can I use them?
  11. Show a progress bar for downloading files using XHR2/AJAX
  12. WebKit “Refused to set unsafe header ‘content-length'”
  13. How to get response url in XMLHttpRequest?
  14. Fetch API vs XMLHttpRequest
  15. Intercept fetch() API requests and responses in JavaScript
  16. Cross-site XMLHttpRequest
  17. How can I modify the XMLHttpRequest responsetext received by another function?
  18. XMLHttpRequest to Post HTML Form
  19. Cross-Origin XMLHttpRequest in chrome extensions
  20. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  21. XMLHttpRequest 206 Partial Content
  22. Ajax – 500 Internal Server Error
  23. responseXML always null
  24. Microsoft Edge blocked cross-domain requests sent to IPs in same private network CIDR
  25. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  26. Same Origin Policy – AJAX & using Public APIs
  27. Phantom JS synchronous AJAX request : NETWORK_ERR: XMLHttpRequest Exception 101
  28. Intercept XMLHttpRequest and modify responseText
  29. Differentiating Between an AJAX Call / Browser Request
  30. XMLHttpRequest testing in Jest

Leave a Comment