A lot of people (including me a few weeks ago) still think that the same-origin policy of the XMLHttpRequest object makes it impossible to send an AJAX request to a foreign domain, but luckily this isn’t true anymore. Ways like JSONP, Flash bridges or some weird iframe calls (it’s fun – spent a whole night on that aproach ;P) have been found to tackle this issue somehow, but there’s a nice draft from the W3C called Cross-Origin Resource Sharing or short CORS, which solves this problem in a very elegant way and is supported by all major browsers.
The good thing is you don’t need to make any changes on the client side, everything will work like you’re expecting it from a usual XMLHttpRequest, all you’ve got do is to make the server send some “magic” HTTP headers and cross domain requests won’t be a problem no more. And that’s the bad thing as well: Sending the headers shouldn’t be a problem, but it implies that you have server-side access. However, let’s just assume you have access to the server and take a look on a simple example including some PHP and Node.js code snippets. Continue reading AJAX cross domain requests with CORS
So I stuck with the native XMLHttpRequest object and extended it’s functionality. The compressed code is just 822 Bytes and XMLHttpRequest compatible. You’re even able to send cross-domain-requests with a bit extra code (see my AJAX cross domain requests with CORS post for more). The code is reported to work with IE9, FF7, Chrome 16, Safari 5.1 and Opera 11.60 beta, but I’m pretty sure every browser with JSON and XMLHttpRequest support should work (tell me whether it works with your browser or not).
You might want to visit my little example page to test the whole thing right away, but I suggest to read a least the section about how to use the JSONHttpRequest object, before you download the code to use it in your page. Continue reading Teach your XMLHttpRequest some JSON