QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Monitoring and Intercepting all AJAX Requests

Monitoring and Intercepting all AJAX Requests

monitoring-ajax

Monitoring AJAX requests comes handy when we want to notify user about information loading, using default variables till AJAX requests finish or some other reasons. In this post I will show a small hack using which we can monitor all AJAX requests at a time. This will save time and make code more productive.


Simplest way of monitoring AJAX requets?

var ajaxRequest1 = new XMLHttpRequest();
ajaxRequest1.open("GET", "ajax1.php", false);
ajaxRequest1.onload = function(){
    console.log(ajaxRequest1.responseText);
}
ajaxRequest1.onprogress = function(){
    console.log("loading");
}
ajaxRequest1.send(null);

var ajaxRequest2 = new XMLHttpRequest();
ajaxRequest2.open("GET", "ajax2.php", false);
ajaxRequest2.onload = function(){
    console.log(ajaxRequest2.responseText);
}
ajaxRequest2.onprogress = function(){
    console.log("loading");
}
ajaxRequest2.send(null);

In the above code we have the same implementation for onprogress event for our both AJAX objects. This takes more time and makes our code less productive because if we want to change the code than we have to change it in every onprogress event handler. And writing the same code again and again is wastage of time.

So I have made a small hack using which we can automate the implementation of onprogress event handler.

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(value) {
    this.addEventListener("progress", function(){
        console.log("Loading");
    }, false);
    this.realSend(value);
};

Here I am overriding the send method of XMLHttpRequest class and attaching progress event handler. And than calling the actual send method which is assigned to another property. Now all AJAX objects will have event handlers attached to them. This way we can monitor all AJAX requests on the web page.

So now we can write

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(value) {
    this.addEventListener("progress", function(){
        console.log("Loading");
    }, false);

    this.addEventListener("load", function(){
        console.log(this.responseText);
    }, false);
    this.realSend(value);
};

var ajaxRequest1 = new XMLHttpRequest();
ajaxRequest1.open("GET", "ajax1.php", false);
ajaxRequest1.send(null);

var ajaxRequest2 = new XMLHttpRequest();
ajaxRequest2.open("GET", "ajax2.php", false);
ajaxRequest2.send(null);

Conclusion

In the similar way you can hack any javascript built in classes and attach some automation code. This simple idea can be used to do many more things in javascript.

Apr 22, 2014Narayan Prusty
Pull To Refresh For Phonegap AppContent Security Policy Tutorial with Examples
Comments: 1
  1. June
    5 years ago

    I was working on this as well but a sample project will be great.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 2 Comments Web Developmentajax, loading, progress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Understanding Javascript Events In Depth
  • requestAnimationFrame Tutorial
  • JavaScript Limit Function Call Rate
  • Responsive Images Tutorial
  • Facebook Style Infinite Scroll
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license