Intercept all ajax calls?

Question

I'm trying to intercept all AJAX calls in order to check if that AJAX response contains specific error code that I send as JSON from my PHP script (codes: ACCESS_DENIED, SYSTEM_ERROR, NOT_FOUND).

I know one can do something like this:

$('.log').ajaxSuccess(function(e, xhr, settings) { });

But - does this work only if "ajaxSuccess" event bubble up to .log div? Am I correct? Can I achieve what I want by binding "ajaxSuccess" event to document?

$(document).ajaxSuccess(function(e, xhr, settings) { });

I can do this in either jQuery or raw JavaScript.

See also: How to intercept every AJAX request from a webpage — hippietrail
– hippietrail, Commented Sep 27, 2012 at 15:48
How about using this library: github.com/slorber/ajax-interceptor — Sebastien Lorber
– Sebastien Lorber, Commented Sep 19, 2014 at 15:22

useless · Accepted Answer · 2022-11-11 16:37:19Z

If you're using jQuery, $.ajaxSuccess is a good option, but here's a generic option that will intercept XHR calls from all frameworks (I've tested it with ExtJS and jQuery - it should work even if multiple frameworks are loaded concurrently). It's been tested to work with IE8, Chrome and Firefox.

(function(XHR) { "use strict"; 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 oldOnReadyStateChange; var url = this._url; function onReadyStateChange() { if(self.readyState == 4 /* complete */) { /* This is where you can put code that you want to execute post-complete*/ /* URL is kept in this._url */ } if(oldOnReadyStateChange) { oldOnReadyStateChange(); } } /* Set xhr.noIntercept to true to disable the interceptor for a particular call */ if(!this.noIntercept) { if(this.addEventListener) { this.addEventListener("readystatechange", onReadyStateChange, false); } else { oldOnReadyStateChange = this.onreadystatechange; this.onreadystatechange = onReadyStateChange; } } send.call(this, data); } })(XMLHttpRequest);

I've posted a more specific example on github which intercepts AJAX calls and posts the AJAX call durations back to the server for statistical analysis.

Based on your implementation, I've published something on NPM that works with both requests and responses! github.com/slorber/ajax-interceptor
That's awesome. More recently than this answer, I've been using this technique for adding CSRF headers to some of our AJAX requests. In future I'll look at using your lib.
Just for anyone using this method and wants to access the response data of the ajax calls. You can get the response in the onReadyStateChange() method via self.response.
How do I stop the script from intercepting a jquery.ajax call? Where do I have to insert the noIntercept value?
Really nice solution just a note that this won't work for fetch & fetch-based libraries since they're not using XMLHttpRequest.

mkilmanas · Accepted Answer · 2011-07-30 17:13:00Z

From http://api.jquery.com/ajaxSuccess/ :

Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

So the selector doesn't define the position where you are "catching" the event (because, honestly, ajax event by its nature doesn't start from a DOM element), but rather defines a scope to which the handling will be defaulted (i.e. this will poitn to that/those element(s)).

In summary - it should be exactly what you wish for

Alexandr Evstafiev · Accepted Answer · 2021-06-30 22:04:34Z

The best way, which I found https://lowrey.me/intercept-2/

const intercept = (urlmatch, callback) => { let send = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function() { this.addEventListener('readystatechange', function() { if (this.responseURL.includes(urlmatch) && this.readyState === 4) { callback(this); } }, false); send.apply(this, arguments); }; };

Srluisreyes · Accepted Answer · 2011-07-31 00:45:35Z

Try using Mockjax.js http://code.appendto.com/plugins/jquery-mockjax

It lets you hijack AJAX calls to the server and mock the location.

Collectives™ on Stack Overflow

Intercept all ajax calls?

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Related