{"id":342,"date":"2012-06-10T09:37:41","date_gmt":"2012-06-10T16:37:41","guid":{"rendered":"http:\/\/sloanseaman.com\/wordpress\/?p=342"},"modified":"2012-06-10T09:37:41","modified_gmt":"2012-06-10T16:37:41","slug":"ajax-interception","status":"publish","type":"post","link":"http:\/\/sloanseaman.com\/wordpress\/2012\/06\/10\/ajax-interception\/","title":{"rendered":"Ajax Interception"},"content":{"rendered":"

The Problem<\/h3>\n

I recently had a problem where I needed to intercept any AJAX based calls from the browser to, well, anything. After a lot of Googling and digging through StackOverflow all I ever found were suggestions for event listeners specific to JQuery or partial solutions that didn’t really work.<\/p>\n\nThere are many instances where you want to grab all the AJAX calls being made. For debugging, for interception to override existing functionality, for parameter injection, etc.<\/p>\n

The Solution<\/h3>\n

The code I wrote is a JQuery plug in but should work for any AJAX calls even if not in JQuery code. <\/p>\n\nFirst, if you are not familiar with basic AJAX functionality, it’s all based around the XMLHttpRequest object. I suggest you read W3Schools<\/a> and Mozilla’s<\/a> descriptions.\n<\/p>\n

Lets look at the code now. Source code available here: ajaxInterceptor.js<\/a><\/p>\n

\r\n\/*\r\n * Util for intercepting all ajax calls \r\n * \r\n * Options:\r\n * open : {\r\n *   fn : function() {}, \/\/ function to call when open is called\r\n *   scope : xxx         \/\/ Scope to execution function in\r\n * },\r\n * send  : {\r\n *   fn : function() {}, \/\/ function to call when set is called\r\n *   scope : xxx         \/\/ Scope to execution function in\r\n * },\r\n * setRequestHeader  : {\r\n *   fn : function() {}, \/\/ function to call when setRequestHeader is called\r\n *   scope : xxx         \/\/ Scope to execution function in\r\n * },\r\n *\/\r\n\r\n(function( $ ) {\r\n\tvar defaultOptions = {\r\n\t\topen \t\t\t\t:  { },\r\n\t\tsend \t\t\t\t:  { },\r\n\t\tsetRequestHeader  \t:  { }\r\n\t}\r\n\r\n\tvar options;\r\n\tvar aiOpen = window.XMLHttpRequest.prototype.open;\r\n\tvar aiSend = window.XMLHttpRequest.prototype.send;\r\n\tvar aiSet  = window.XMLHttpRequest.prototype.setRequestHeader;\r\n\tvar recurrsion = false;\r\n\t\r\n\tvar methods = {\r\n\t\tinit : function(opts) {\r\n\t\t\toptions = $.extend(true, defaultOptions, opts);\r\n\t\t\tmethods.enable();\r\n\t\t},\r\n\t\t\r\n\t\tenable : function() {\r\n\t\t\twindow.XMLHttpRequest.prototype.open = function(method,url,async,uname,pswd) {\r\n\t\t\t\tif (options.open.fn) {\r\n\t\t\t\t\toptions.open.fn.call(options.open.scope?options.open.scope:this, \r\n\t\t\t\t\t\tmethod,\r\n\t\t\t\t\t\turl,\r\n\t\t\t\t\t\tasync,\r\n\t\t\t\t\t\tuname,\r\n\t\t\t\t\t\tpswd);\r\n\t\t\t\t}\r\n\t\t\t\taiOpen.call(this, method,url,async,uname,pswd);\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\twindow.XMLHttpRequest.prototype.send = function(data) {\r\n\t\t\t\tif (options.send.fn && !recurrsion) {\r\n\t\t\t\t\trecurrsion = true;\r\n\t\t\t\t\toptions.send.fn.call(options.send.scope?options.send.scope:this, \r\n\t\t\t\t\t\tdata);\r\n\t\t\t\t\trecurrsion = false;\r\n\t\t\t\t}\r\n\t\t\t\taiSend.call(this, data);\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\twindow.XMLHttpRequest.prototype.setRequestHeader = function(key, value) {\r\n\t\t\t\tif (options.setRequestHeader.fn) {\r\n\t\t\t\t\toptions.setRequestHeader.fn.call(options.setRequestHeader.scope?options.setRequestHeader.scope:this, \r\n\t\t\t\t\t\tkey, \r\n\t\t\t\t\t\tvalue);\r\n\t\t\t\t}\r\n\t\t\t\taiSet.call(this, key, value);\r\n\t\t\t};\r\n\t\t},\r\n\t\t\r\n\t\tdisable : function() {\r\n\t\t\twindow.XMLHttpRequest.prototype.open = aiOpen;\r\n\t\t\twindow.XMLHttpRequest.prototype.send = aiSend;\r\n\t\t\twindow.XMLHttpRequest.prototype.setRequestHeader = aiSet;\r\n\t\t}\r\n\t}\r\n\r\n\t$.fn.ajaxInterceptor = function( method ) {\r\n\t\tif ( methods[method] ) {\r\n\t\t\treturn methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));\r\n\t\t} else if ( typeof method === 'object' || ! method ) {\r\n\t\t\treturn methods.init.apply( this, arguments );\r\n\t\t} else {\r\n\t\t\t$.error( 'Method ' +  method + ' does not exist on ajaxInterceptor' );\r\n\t\t}    \r\n\t};\r\n})(jQuery);\r\n\r\n<\/pre>\n
Lets go over the code so you can understand what is going on.<\/p>\n
\r\n\tvar defaultOptions = {\r\n\t\topen \t\t\t\t:  { },\r\n\t\tsend \t\t\t\t:  { },\r\n\t\tsetRequestHeader  \t:  { }\r\n\t}\r\n<\/pre>\n
First thing I do is set up the defaults that developers can override as well as ensure that I don’t get any ‘undefined’ errors in the javacript.<\/p>\n
\r\n\tvar options;\r\n\tvar aiOpen = window.XMLHttpRequest.prototype.open;\r\n\tvar aiSend = window.XMLHttpRequest.prototype.send;\r\n\tvar aiSet  = window.XMLHttpRequest.prototype.setRequestHeader;\r\n\tvar recurrsion = false;\r\n<\/pre>\n
Next I define some variables but the key thing to pay attention to is the aiOpen<\/code>, aiSend<\/code>, and aiSet<\/code> variables.  What this is actually doing is taking the XMLHttpRequest<\/code>‘s open, send, and setRequestHeader methods and placing them into variables.  I can use this later to disable whatever I do in the code by reverting my changes to these variables.<\/p>\n
\r\ninit : function(opts) {\r\n\toptions = $.extend(true, defaultOptions, opts);\r\n\tmethods.enable();\r\n},\r\n<\/pre>\n
The init() method does nothing more that take in any options the developer passes in, use them to override the defaultOptions and store the resulting combination of the two into the options<\/code> variable.  After that it calls the enable() method.<\/p>\n
\r\nwindow.XMLHttpRequest.prototype.open = function(method,url,async,uname,pswd) {\r\n\tif (options.open.fn) {\r\n\t\toptions.open.fn.call(options.open.scope?options.open.scope:this, \r\n\t\t\tmethod,\r\n\t\t\turl,\r\n\t\t\tasync,\r\n\t\t\tuname,\r\n\t\t\tpswd);\r\n\t}\r\n\taiOpen.call(this, method,url,async,uname,pswd);\r\n};\r\n<\/pre>\n
The first part of the enable<\/code> method overrides the XMLHttpRequest<\/code>‘s open<\/code> method with my method.  All my method does is call a method that the developer might have passed via the options and then calls the normal open<\/code> method.  This way we can run whatever method we want before the open<\/code> is actually executed.<\/p>\n\nThe next two methods are just variations on a theme.  The send<\/code> and setRequestHeader<\/code> do the exact same thing as open<\/code> so I won’t go over them (hope you don’t mind)<\/p>\n
\r\ndisable : function() {\r\n\twindow.XMLHttpRequest.prototype.open = aiOpen;\r\n\twindow.XMLHttpRequest.prototype.send = aiSend;\r\n\twindow.XMLHttpRequest.prototype.setRequestHeader = aiSet;\r\n}\r\n<\/pre>\n
As I mentioned before, one of the main reasons I placed the methods in variables is to undo what I overwrote.  In this case I’m just restoring the original functionality of the XMLHttpRequest object any time the disable<\/code> is called.<\/p>\n
Example Usage<\/h3>\n
Lets now show a few ways this can be used.  The most common would be to intercept any calls to the AJAX service on the server side.  This is in XMLHttpRequest object terms, the send<\/code> call.<\/p>\n
\r\n<script src="jquery-1.7.2.min.js"><\/script>\r\n<script src="ajaxInterceptor.js"><\/script>\r\n<script>\r\n$(document).ajaxInterceptor({\r\n\tsend : {\r\n\t\tfn : function(data) { alert('send'); }\r\n\t}\r\n});\r\n<\/pre>\n
First we need to bring in the JQuery library and of course the ajaxInterceptor library itself.  Next we attach it to the document<\/code> as that is basically the root of what we want (basically we are just attaching it to one of the most parent objects but really we could attach it to anything).<\/p>\n\nWe then pass in the option “send” and a function that will alert('send')<\/code> any time send<\/code> is called.<\/p>\n\nThat’s all there is to it!  If you put your code in the fn: function<\/code> and it will be executed whenever any AJAX send<\/code> is called.  <\/p>\n\nI should note that the data that is passed in is the same data object that would be passed to the underlying XMLHttpRequest send<\/code> function.  Also, the send<\/code> can be passed a scope<\/code> if you want your method to execute in a specific scope.<\/p>\n\n
The next example is how to disable the code if you ever need to.<\/p>\n
\r\n$(document).ajaxInterceptor("disable");\r\n<\/pre>\n
Again, pretty easy.  The code follows the standard JQuery plug-in methodology.<\/p>\n\n
I hope this code helps you out.  I really could not find any good examples anywhere that were as encompassing as this one.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Problem I recently had a problem where I needed to intercept any AJAX based calls from the browser to, well, anything. After a lot of Googling and digging through StackOverflow all I ever found were suggestions for event listeners … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,10],"tags":[29,26,19],"_links":{"self":[{"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/posts\/342"}],"collection":[{"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":11,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":359,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/posts\/342\/revisions\/359"}],"wp:attachment":[{"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/categories?post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sloanseaman.com\/wordpress\/wp-json\/wp\/v2\/tags?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}