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.

Answer 1

If you're using jQuery, $.ajaxSuccess is a good option, but here's a slightly more 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.

Answer 2

The raw javacript code to intercept ajax calls:

(function(send) {     XMLHttpRequest.prototype.send = function(body) {         var info="send data\r\n"+body;         alert(info);         send.call(this, body);     }; })(XMLHttpRequest.prototype.send); 

The jQuery code to intercept ajax:

$.ajaxSetup({     beforeSend: function (xhr,settings) {         alert(settings.data);         alert(settings.url);     } }); 

Reference: http://myprogrammingnotes.com/intercept-ajax-calls-jquery.html