Cross Domain AJAX AKA OnDemand JavaScript

Tags: JavaScript, Cross-Domain

XmlHttpRequest is the traditional heart of any AJAX application. Having access to GET and POST requests to give a la carte updates to the pages is neat. But to really make use of the XmlHttpRequest a server proxy was often required in order to get relevant data from external sources.

One of the major stumbling blocks to using AJAX on your webpage has been the cross domain restriction (the fact that you cannot download AJAX data from another domain). Most people have been content to let cross domain requests be routed through a server proxy. This work fine because servers are not restricted by the same cross domain limitations as browsers.

But when one looks at web applications like Google Maps (or in this case Yahoo's services) it becomes obvious that they must be doing something to override the cross domain restriction as their APIs don't require proxies on the servers. This begs the question "How to do this on my site?"

Doing a single search on Google brought me to Dan Theurer's site where he describes how to make cross domain requests. The post focuses on Yahoo's webservices, but the principle is as simple as it is beautiful and is possible to implement on all webservices that return JSON. In fact if you have a look at the webservices at Geonames you will see that the JSON webservices include the callback parameter also.

So how does one overcome the built in security on the XmlHttpRequest? The answer is you don't. You bypass it by dynamically inserting a script tag on your page. Script tags get run when inserted and can be downloaded from anywhere and any domain. The simple solution to the restrictions of XmlHttpRequest is to have a receiving function on the page with the JSON data as a parameter. The downloaded script is actually nothing more than the JSON results wrapped in a call for this predefined function - which is why it is also called on demand JavaScript. Of course the function needs to know what information structure it will receive, but this information is of course available when you implement the call to the webservice.

Notice the difference between these two webservice requests. First one as 'pure' JSON and the other one with a predefined callback handler. You will see that the second one has the pure JSON result as a parameter to the callback handler. The script thus gets interpreted as a call to the specified function.

On Demand JavaScript is not limited to JSON webservices. It can returned using the XmlHttpRequest also, but with dynamic script tags you get clientside access to third party information sources.

Of course this is not the immediate solution to all cross domain restriction problems but as more and more webservices implement a callback parameter to their JSON services the more work can be pushed to the browser. There are of course some security issues that have to be noted by the page designer. Downloading JavaScript from a third party website should not be taken lightly and only trusted sources should be used.

Add a Comment