Data Liberation via the Script Tag and wrapped JSON

Mashups excite me because they allow a user to extract personal unique value from applications that were not designed to do so — at the risk of butchering a metaphor, it’s a recombinant effect — mashups leverage common protocols and allow people to mix data in ways that the original data providers couldn’t have imagined.

But this kind of a data sampling is not as easy as pulling data in from specific sites, due to cross domain scripting limitations that disallow javascript loaded from one domain to request data from another domain. In order to get around this limitation, you need to proxy the call to the other domain from your own server. This limits Mashup creation because I can’t just drop in a call to my favorite data provider on my blog or my homepage. Kind of a downer.

Fortunately there has been a way around the cross domain limitation for a while — here is my understanding of how it works.

The Script Tag

While Javascript is constrained by the same origin policy, the src attribute of the script tag is not. So you can load javascript from another domain with no ill effect. This is how you would load in js from another website. Note that if you load javascript via a script tag, you need to actually use that javascript in a subsequent script tag. So we can actually access javascript from another domain — now how do we actually use it?

Script Tag rendering

A Script executes the script in its src tag when it is rendered by the browser. If we return JSON from a src attribute of a script tag, we have instantly executable code. But we don’t actually have a way to access that code — the tag below:

<script src="http://arun.com/js/someJavaScript.js"/>

may map to

{{data}}

<script>

eval({{data}})

</script>

but there is nothing to assign that data back to — no way to assign the data back to javascript code.

Wrapping my JSON

The final piece in the puzzle is the use of callbacks — by wrapping JSON in a user specified callback, we can return data from an outside domain to a user defined function.

The user can specify the callback as a parameter to a method defined in the remotely included js:

<script src="http://otherdomain.com/js/some.js"/>

where some.js has that method defined:

function returnRemoteData(options) {

callback = options[callback];

var head = Document.getElementsByTagName("head")[0];

var newScript = document.createElement('script');

newScript.id = 'remoteAccessScript';

newScript.src="http://remotescript.com/js/remote.js?callback="+callback;

head.appendChild(script);

}

and the user calls it as follows:

<script>

function execRemote(data) {

var data = eval(data);
...
}

returnRemoteData({callback: execRemote});

</script>

returnRemoteData will cause a new script tag to be created that requests source from http://remotescript.com/js/remote.js, passing the user specified callback method as a parameter. This is important because the return from that call will be:

execRemote({{JSON data}}), which will get executed by the script tag.

If I were writing an API, a la Yahoo/Google, I would keep the user from having to know about the new script tag, etc, by wrapping it in my code. This makes it super easy for them to access the data I provide by including my js files in their page, and calling my functions with their callbacks.


					
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: