Weblog MSDN de Thomas Conté

Le Weblog MSDN de Thomas Conté, en français.

Accéder au Blob Storage Windows Azure avec jQuery

Accéder au Blob Storage Windows Azure avec jQuery

  • Comments 1

Saviez-vous qu’il est parfaitement possible d’accéder au Blob Storage Windows Azure depuis JavaScript, en utilisant par exemple jQuery?

A la base, l’idée paraît évidente, puisque les Blobs sont accessible par un URL public… Mais en pratique, il y a un gros obstacle: la Same Origine Policy (“Règle de Même Origine?” :-), dite “SOP”, implémentée par les navigateurs, et qui impose une restriction absolue: le code JavaScript ne peut accéder qu’aux ressources provenant du même site. Par conséquent, vous ne pourrez jamais charger un Blob via XMLHttpRequest par exemple!

Il existe cependant un contournement très populaires, bien que relativement ésotérique dans son implémentation: JSONP. L’idée est d’utiliser le fait que la balise script n’est pas soumise à la SOP: une page HTML peut donc charger des scripts de toute origine. Il suffit donc de mettre à disposition la donnée JSON sous une forme exécutable, et les données pourront être chargées par la page appelante via un tag script. Par exemple:

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

Comment rendre la donnée exécutable? C’est le “Padding” de JSONP”: le serveur renvoie un appel à une fonction, passant les données en paramètres! Dans mon exemple, le fichier exemple.jsonp contiendra par exemple:

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

Lorsque ce script sera chargé par la balise script, cela provoquera l’appel à une fonction jsonpCallback, qui recevra les données en paramètres.

Il est donc très simple d’adapter cette technique au Blob Storage Windows Azure! Il nous suffit de stocker des scripts conformes à la convention JSONP, et nous pourrons les appeler depuis un script JavaScript.

Voici par exemple un bloc JSON d’exemple sur mon Blob Storage. Il est assez volumineux, et contient une structure de données décrivant les “like” les plus populaires parmi mes amis sur Facebook. La structure de donnée elle-même consiste en un tableau d’objets JavaScript tels que:


[
    {"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"}
]

Le Blob généré entoure simplement ce tableau d’objets avec un appel à la fonction dataCallback:

dataCallback(…)

Vous pouvez charger ce Blob pour en examiner la structure.

Une fois le Blob généré, il ne reste plus qu’à le charger, et pour éviter d’avoir à gérer tous les détails d’implémentation, le plus simple reste d’utiliser jQuery, qui est parfaitement équipé pour gérer le JSONP; il suffit de trouver les bons paramètres ;-) Voici donc un petit jsFiddle basé sur jQuery 1.6 :

Pas grand-chose de remarquable, sinon que l’on passe avec jsonpCallback le même nom de fonction que ce que l’on retrouve dans le Blob JSONP!

J’espère que cette petite technique vous sera utile pour accéder directement au Blob Storage depuis votre code JavaScript.

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post