Ajax / XMLHttpRequest tracking using javascript

Question

I know firebug can trace all the Ajax/XHR events on a page. But I need to prepare a tool which automatically tracks these calls on button clicks on an already existing webpage.

My webpage's HTML and JS structure are follows:

HTML:

<a href="javascript:void(0)" id="callButton" class=" call-btn " style="width: 30px;">Call</a>

JS:

scope: this,
id: 'callButton',
handler: function () {
    Ext.Ajax.request({
        url: '/Ajax/getCall/callUser/',
        params: {
            userID: usr.id
        },

Can anyone suggest how to track this ajax calls with the help of another javascript or something? Basically i need to get what is called on button click, in this example: "/Ajax/getCall/callUser/". It should work with all buttons on my page as well.

Answer 1

Add at start of your script this:

XMLHttpRequest.prototype.oldSend = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function (data) {
    // there you can log requests
    console.log("AJAX request was sent.");
    this.oldSend.call(this, data);
}

This creates copy of send method on XMLHttpRequest object and internal method replaces by method where you can log AJAX requests and this method call the internal method whitch send AJAX request.

Example: http://jsfiddle.net/fgp783rz/1