Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AJAX timing interceptor: this class intercepts all AJAX calls and records the time taken for the HTTP request to complete. These timings are posted back to the server in batches, if there are any to send, about every two seconds. Tested in Firefox, Chrome
(function(XHR) {
"use strict";
var stats = [];
var timeoutId = null;
var open = XHR.prototype.open;
var send = XHR.prototype.send;
XHR.prototype.open = function(method, url, async, user, pass) {
this._url = url;
open.call(this, method, url, async, user, pass);
};
XHR.prototype.send = function(data) {
var self = this;
var start;
var oldOnReadyStateChange;
var url = this._url;
function onReadyStateChange() {
if(self.readyState == 4 /* complete */) {
var time = new Date() - start;
stats.push({
url: url,
duration: time
});
if(!timeoutId) {
timeoutId = window.setTimeout(function() {
var xhr = new XHR();
xhr.noIntercept = true;
xhr.open("POST", "/clientAjaxStats", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.send(JSON.stringify({ stats: stats } ));
timeoutId = null;
stats = [];
}, 2000);
}
}
if(oldOnReadyStateChange) {
oldOnReadyStateChange();
}
}
if(!this.noIntercept) {
start = new Date();
if(this.addEventListener) {
this.addEventListener("readystatechange", onReadyStateChange, false);
} else {
oldOnReadyStateChange = this.onreadystatechange;
this.onreadystatechange = onReadyStateChange;
}
}
send.call(this, data);
}
})(XMLHttpRequest);
@wenzuojing

This comment has been minimized.

Copy link

@wenzuojing wenzuojing commented Nov 19, 2013

Ie 6 does not support the XMLHttpRequest object, how should solve? Thank you !

@shishirarora3

This comment has been minimized.

Copy link

@shishirarora3 shishirarora3 commented Aug 27, 2015

arey if XHR is not supported then do the same thing with whatever is supported

@ashishsajwan

This comment has been minimized.

Copy link

@ashishsajwan ashishsajwan commented Oct 20, 2015

@suprememoocow try using performance.now() instead of new Date()

@thang-hoang

This comment has been minimized.

Copy link

@thang-hoang thang-hoang commented Jun 2, 2017

very nice and elegant, applying to my project now 👍

@kundank010

This comment has been minimized.

Copy link

@kundank010 kundank010 commented Aug 31, 2017

Can anyone help me, I'm not getting how to use intercept.js.

@llloyola

This comment has been minimized.

Copy link

@llloyola llloyola commented Dec 26, 2018

I'm kind of new to javascript
Could anyone help me to understand how to use this?

@bernardoadc

This comment has been minimized.

Copy link

@bernardoadc bernardoadc commented Feb 26, 2019

@rkundan, @llloyola
Just load the file / execute in console. Every time an AJAX call is made, the code will trigger. Specifically in line 34, he's setting to send AJAX information to own server URL "/clientAjaxStats". This should be modified to your needs

@sourcecodeit

This comment has been minimized.

Copy link

@sourcecodeit sourcecodeit commented Nov 27, 2020

I'm kind of new to javascript
Could anyone help me to understand how to use this?

No, please you explain why you'd need this being new to JS :) really, just curious!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment