Skip to main content

Accessing File Stored in 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 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:

Comments

Post a Comment

Popular posts from this blog

gcAllowVeryLargeObjects Element

There are numerous new features coming with .NET 4.5 and here, on this blog, you can find several posts about it. But the feature we are goint to talk about today is very exciting, because we were waiting for it more than 10 years. Since .NET 1.0 the memory limit of .NET object is 2GB. This means you cannot for example create array which contains elements with more than 2GB in total. If try to create such array, you will get the OutOfMemoryException. Let’s see an example how to produce OutOfMemoryException. Before that Open Visual Studio 2012, and create C# Console Application, like picture below. First lets create simple struct with two double members like example below: 1 2 3 4 5 6 7 8 9 10 11 12 public struct ComplexNumber {      public double Re;      public double Im;      public ComplexNumber( double re, double im)      {    ...
Post a Comment
Read more

Support for debugging lambda expressions with Visual Studio 2015

Anyone who uses LINQ (or lambdas in general) and the debugger will quickly discover the dreaded message “Expression cannot contain lambda expressions”. Lack of lambda support has been a limitation of the Visual Studio Debugger ever since Lambdas were added to C# and Visual Basic.  With visual studio 2015 Microsoft has added support for debugging lambda expressions. Let’s first look at an example, and then I’ll walk you through current limitations. Example To try this yourself, create a new C# Console app with this code: using System.Diagnostics; using System.Linq; class Program { static void Main() { float[] values = Enumerable.Range(0, 100).Select(i => (float)i / 10).ToArray(); Debugger.Break(); } } Then compile, start debugging, and add “values.Where(v => (int)v == 3).ToArray()” in the Watch window. You’ll be happy to see the same as what the screenshot above shows you. I am using Visual Studio 2015 Preview and it has some limitati...
1 comment
Read more

An Introduction to Windows Azure Table Storage

Windows Azure Tables are a non-relational, key-value-pair, storage system suitable for storing massive amounts of unstructured data.  Whereas relational stores such as SQL Server, with highly normalized designs, are optimized for storing data so that queries are easy to produce, the non-relational stores like Table Storage are optimized for simple retrieval and fast inserts.  This article will cover the very basics of Windows Azure Table storage and provide you with resources and suggested topics to continue your learning. Some people, when first learning about the Windows Azure platform, find it hard to understand the purpose of the Table Storage feature.  This is especially true of those who are familiar with developing applications using highly relational data.  To get a good understanding of how a Key-Value Pair system differs from a traditional relational database you can read Buck Woody’s article on the topic in his continuing series:...
Post a Comment
Read more