Ajax / XMLHttpRequest tracking using javascript

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.

Answers


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


Need Your Help

Javascript onkeyup event(how to mention Arrow keys in my code)

c# javascript jquery

I'm using javascript onkeyup event,i'm restrict only numbers and backspace and tab button. I need to mention Left right up and down arrow keys in my code... how can i mention in my code... please h...

jQuery and primefaces conflict

javascript jquery jsf-2 primefaces

I'm using Primefaces 3.5 with the jquery bundled inside of it. And i want to apply this small jquery code , it is a simple code , i added the behavior of the tab button to the enter button in the