Accessing File Stored in Windows Azure Blob Storage Using jQuery

By | September 8, 2017

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 accessible from a public UR. 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=”http://www.sandeepknarware.in/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…)

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.

$.ajax({
url: ‘http://tcontepub.blob.core.windows.net/json/687276944.json’,
dataType: ‘jsonp’,
jsonpCallback: ‘dataCallback’,
success: function(data) {
$.each(data, function(i, v) {
$(‘#likes’).append($(‘<li>’, {
text: v.Name
}));
});
}
});

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:

Leave a Reply

Your email address will not be published. Required fields are marked *