Post cover

Catch the XMLHttpRequest in Plain JavaScript

Posted January 24, 2016

When coding Chrome extensions, sometimes I need to catch the event when JavaScript application starts a XMLHttpRequest (XHR) and finishes. Because the injected script into web page context do not modify the original application, this is hard to do, because pure XHR does not trigger global events.

Some libraries, for example jQuery, do trigger global events ajaxStart and ajaxStop, and even offers global ajax events API. Unfortunately these events are triggered only when using library methods to make AJAX calls. And for encapsulation reason, the application can suppress these events, setting global option to false:

url: "test.html",
global: false


JavaScript offers the modification of any object's prototype, including the host objects like XMLHttpRequest. This is exactly what we need to insert custom behavior. The open() and send() will be overwritten with new methods holding the custom logic and then calling the original ones.

Let's make sure that and XMLHttpRequest.prototype.send are writable:

var openDescriptor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'open'),
sendDescriptor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'send');
openDescriptor // prints {"writable": true, "configurable": true, ...}
sendDescriptor // prints {"writable": true, "configurable": true, ...}

The method Object.getOwnPropertyDescriptor() is used to determine the settings (descriptor) of an object property. To override these methods, we need the writable to be true: which means that we can modify the property.

Catch the request

Use the following code snippet to determine when an XMLHttpRequest starts and finishes:

var open =,
send = window.XMLHttpRequest.prototype.send;
function openReplacement(method, url, async, user, password) {
this._url = url;
return open.apply(this, arguments);
function sendReplacement(data) {
if(this.onreadystatechange) {
this._onreadystatechange = this.onreadystatechange;
this.onreadystatechange = onReadyStateChangeReplacement;
return send.apply(this, arguments);
function onReadyStateChangeReplacement() {
if(this._onreadystatechange) {
return this._onreadystatechange.apply(this, arguments);
} = openReplacement;
window.XMLHttpRequest.prototype.send = sendReplacement;

Initially references to original open() and send() are saved. Later new methods for XMLHttpRequest are defined: openReplacement() and sendReplacement(), which will execute the custom code and then call the original methods using Function.apply(). In the end, the new methods are assigned to XMLHttpRequest.prototype. Because the class prototype is modified, any new instances of the XMLHttpRequest will use the custom methods.

Notice that the override snippet should be applied before starting any XHR requests.


Check the code sample, which demonstrates how to catch the send and finish events.

See also

Like the post? Please share!

Dmitri Pavlutin

About Dmitri Pavlutin

Software developer and sometimes writer. My daily routine consists of (but not limited to) drinking coffee, coding, writing, overcoming boredom 😉. Living in the sunny Barcelona. 🇪🇸