Append something always to an XHR Request

Question

I want to attach a JS Variable to every XHR request that will be issued from my single page web application.

What would be the best approach to achieve this? I don't want to establish special methods for sending with this attributes, as there may be third parties integrating with my application.

I thought about overriding the send method on the XHR Object but thats not considered good style either. I can't use cookies due to requests being cross-domain.

Any better idea or approach to this?

Thank you! -Alessandro

*"as there may be third parties integrating with my application."* Can't you "force" them to use your Ajax call wrapper? Creating your own set of functions would be the easiest way IMO. — Felix Kling, Nov 21 '13 at 09:40
I would probably use the proxy pattern for this. http://en.wikipedia.org/wiki/Proxy_pattern — JeffreyZ, Nov 21 '13 at 09:41
No, unfortunately I can't force them, as they may use their own wrappers for XHR which then loose my "injected" Data. — AlessandroEmm, Nov 21 '13 at 09:44
@user2389688 does the proxy pattern really differ all that much from prototyping? You anyway depend on the browsers API and Implementation, isn't it? — AlessandroEmm, Nov 21 '13 at 11:01

score 1 · Accepted Answer · answered Nov 21 '13 at 12:14

1

if you really want to extend the existing functionalities without adding any library-like function, you could solve this using monkey patching:

(function() {
    var originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
        var getParameter = 'foo=bar';

        if(url.indexOf('?') === -1) {
           url = url + '?' + getParameter;
        } else {
           url = url + '&' + getParameter;
        }

        console.log('you just got monkey-patched! url is now:', url);

        originalOpen.call(this, method, url, async, user, password);
    }
})();

var request = new XMLHttpRequest();
request.open('get', 'http://google.com');

see also this jsfiddle for a working example.

you can use the same technique when injecting stuff into the body of a request if you patch the send() function. if you do, ensure you take care for the type of the data to be transmitted (see MDN). it doesn't make sense to append a parameter to a binary body ;)

answered Nov 21 '13 at 12:14

manu

967
1
11
28

Isn't this the proxy pattern? – AlessandroEmm Nov 21 '13 at 12:31
the monkey patch is a proxy actually, you're right. but in this circumstances, i'd talk of a monkey patch rather than a fully blown proxy. – manu Nov 21 '13 at 12:44
I was looking up this prior to asking and it was very similar.. http://stackoverflow.com/questions/7379732/what-is-a-javascript-proxy-pattern#answers-header Is there really any effective difference between proxy pattern and prototyping in Javascript? – AlessandroEmm Nov 21 '13 at 12:54
this is not really just about prototypes in javascript. you can monkey patch existing code regardless if it's located in an objects prototype or somewhere else. prototypes come in place when you want to create memory and cpu efficent object hierarchies. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain – manu Nov 21 '13 at 14:35
What I meant and probably put a bit badly was that overwriting an objects prototype would have similar effect to what the proxy does. Agree? The only difference being that I have an artifical reference to the old implementation of "var originalOpen" in your example. – AlessandroEmm Nov 21 '13 at 14:48
there's no difference in the way jquerys XHR wrapper gets extended in the thread above and how XHR itself gets extended here. both are monkey patches or proxies (with your words: both have artificial references to the original function object) the question is: is it ok to monkey patch/proxy at all since it adds a hidden layer anyway. if you can keep track what happens in your system i'd say its fine. but in a complex system with a lot of abstraction it can get quite nasty to debug. in your case overall, if possible, i'd prefer an abstraction of the XHR object to handle such stuff more visible. – manu Nov 21 '13 at 14:58

Append something always to an XHR Request

1 Answers1