JavaScript: Detect AJAX requests

Here's some code (tested by pasting into Chrome 31.0.1650.63's console) for catching and logging or otherwise processing ajax requests and their responses:

(function() {    var proxied = window.XMLHttpRequest.prototype.send;    window.XMLHttpRequest.prototype.send = function() {        console.log( arguments );        //Here is where you can add any code to process the request.         //If you want to pass the Ajax request object, pass the 'pointer' below        var pointer = this        var intervalId = window.setInterval(function(){                if(pointer.readyState != 4){                        return;                }                console.log( pointer.responseText );                //Here is where you can add any code to process the response.                //If you want to pass the Ajax request object, pass the 'pointer' below                clearInterval(intervalId);        }, 1);//I found a delay of 1 to be sufficient, modify it as you need.        return proxied.apply(this, [].slice.call(arguments));    };})();

This code solves the above issue with the accepted answer:

Note that it may not work if you use frameworks (like jQuery), because they may override onreadystatechange after calling send (I think jQuery does). Or they can override send method (but this is unlikely). So it is a partial solution.

Because it does not rely on the 'onreadystatechange' callback being un-changed, but monitors the 'readyState' itself.

I adapted the answer from here: https://stackoverflow.com/a/7778218/1153227

Gives this a try. Detects Ajax responses, then I added a conditional using the XMLHttpRequest propoerties readyState & status to run function if response status = OK

var oldXHR = window.XMLHttpRequest;function newXHR() {    var realXHR = new oldXHR();    realXHR.addEventListener("readystatechange", function() {        if(realXHR.readyState==4 && realXHR.status==200){            afterAjaxComplete() //run your code here        }    }, false);    return realXHR;}window.XMLHttpRequest = newXHR;

Modified from:Monitor all JavaScript events in the browser console

This can be a bit tricky. How about this?

var _send = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send = function() {    /* Wrap onreadystaechange callback */    var callback = this.onreadystatechange;    this.onreadystatechange = function() {                      if (this.readyState == 4) {             /* We are in response; do something,                like logging or anything you want */         }         callback.apply(this, arguments);    }    _send.apply(this, arguments);}

I didn't test it, but it looks more or less fine.

Note that it may not work if you use frameworks (like jQuery), because they may override onreadystatechange after calling send (I think jQuery does). Or they can override send method (but this is unlikely). So it is a partial solution.

EDIT: Nowadays (the begining of 2018) this gets more complicated with the new fetch API. Global fetch function has to be overridden as well in a similar manner.