Accessing Windows Azure Blob Storage using jQuery

Did you know it was possible to access the Windows Azure Blob Storage directly from JavaScript, for example using jQuery?

At first, it sounds obvious, since Blobs are after all acessible from a public URL… But in practice, there is a very big hurdle: the Web browser’s Same Origine Policy or SOP, that restricts JavaScript code to accessing resources originating from the same site the script was loaded from. This means that you will never be able to load a Windows Azure Blob using XMLHttpRequest for example!

Fortunately, there is a popular workaround called JSONP (“JSON with Padding”). The idea behind this technique is that the script tag is not submitted to the SOP: an HTML page can thus load a JavaScript file from any site. So, if you expose your data in an “executable” form in JavaScript, a page will be able to load this data using a script tag. For example:

<script type="text/javascript" src="https://toto.com/exemple.jsonp">
</script>

But how can you make data executable? This is what the “Padding” in JSONP is about: you are going to pad, or surround, your JSON data with a function call. In my example, the exemple.jsonp file could contain:

jsonpCallback({"Nom": "Thomas", "Id" : 42,})

When this script will be loaded by the script tag, this will trigger a call to a jsonpCallback function that will receive the JSON data as a parameter.

It is thus very simple to adapt this technique to Windows Azure Storage! All we need to do is to create Blob conforming to the JSONP convention, and we will be able to call them from a JavaScript program.

Here is for example a sample JSON Blob on my public Windows Azure Storage. It is fairly large (more than 200 KB) and contains a data structure describing the most popular Facebook “likes” from my friends (no surprise, lots of Microsoft-related stuff in there!) The data structure itself is organized as a JavaScript array of objects like this:

 
[
    {"Nb":60,
     "Id":"129459787073480",
     "Name":"Developpeurs",
     "Category":"Product/service",
     "Timestamp":"\/Date(1312886077750)\/",
     "PartitionKey":"687276944",
     "RowKey":"129459787073480"},
    {"Nb":44,
     "Id":"343983715428",
     "Name":"Windows Phone France",
     "Category":"Product/service",
     "Timestamp":"\/Date(1312886077780)\/",
     "PartitionKey":"687276944",
     "RowKey":"343983715428"},
    {"Nb":43,
     "Id":"192285182795",
     "Name":"Visual Studio 2010 en France",
     "Category":"Product/service",
     "Timestamp":"\/Date(1312886081737)\/",
     "PartitionKey":"687276944",
     "RowKey":"192285182795"},
    {"Nb":40,
     "Id":"20528438720",
     "Name":"Microsoft",
     "Category":"Company",
     "Timestamp":"\/Date(1312886077553)\/",
     "PartitionKey":"687276944",
     "RowKey":"20528438720"}
]

All you need to do is to surround this data structure with a function call to e.g. dataCallback:

dataCallback(…your JSON goes here…)

You can load this blob to see the final format.

Once you have your data stored as JSON Blobs, all you need to do is to load it, and in order to simplify the (many) implementation details, I will use jQuery’s excellent AJAX functions, that perfectly well equipped to deal with JSONP ; all you need to do is find the right parameters ;-)

So, here is a little jsFiddle that shows you how to call the Blob using jQuery 1.6:

Nothing really remarkable, all you need to do is to pass to jQuery the same callback name you used in your JSONP file! This is what the following parameter does:

jsonpCallback: 'dataCallback'

This is it! I hope you will find this little technique useful.