Le DSL et le format JSON

Le gros avantage du Dynamic Script Loading (pour « chargement dynamique de script », abrégé DSL) est qu'il permet de récupérer du contenu sous forme d'objets Javascript, comme un tableau ou tout simplement un objet littéral, et donc le fameux JSON. Si on récupère des données JSON viaXMLHttpRequest, ces données sont livrées sous la forme de texte brut (récupérées via la propriétéresponseText). Il faut donc utiliser la méthode parse() de l'objet JSON pour pouvoir les interpréter. Avec le DSL, ce petit souci n'existe pas puisque c'est du Javascript qui est transmis, et non du texte !

Charger du JSON

Comme dans l'exemple précédent, nous allons utiliser une page PHP pour générer le contenu du fichier Javascript, et donc notre JSON. Les données JSON contiennent une liste d'éditeurs et pour chacun une liste de programmes qu'ils éditent :

<?php

header("Content-type: text/javascript");

echo 'var softwares = {

"Adobe": [

"Acrobat",

"Dreamweaver",

"Photoshop",

"Flash"

"Mozilla": [

"Firefox",

"Thunderbird",

"Lightning"

"Microsoft": [

"Office",

"Visual C# Express",

"Azure"

]

};';

receiveMessage(softwares);

Au niveau de la page HTML, pas de gros changements… Nous allons juste coder une meilleure fonctionreceiveMessage() de manière à afficher, dans une alerte, les données issues du JSON. On utilise une boucle for in pour parcourir le tableau associatif, et une deuxième boucle for imbriquée pour chaque tableau :

function sendDSL() {

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

scriptElement.src = 'dsl_script_json.php';

document.body.appendChild(scriptElement);

}

function receiveMessage(json) {

var tree = '', nbItems, i;

for (node in json) {

tree += node + "\n";

nbItems = json[node].length;

for (i=0; i<nbItems; i++) {

tree += '\t' + json[node][i] + '\n';

}

alert(tree);

}

</script>

<p><button type="button" onclick="sendDSL()">Charger le JSON</button></p>

Avec ça, pas besoin de parser le JSON, c'est directement opérationnel !

Petite astuce pour le PHP

Le PHP dispose de deux fonctions pour manipuler du JSON : json_encode() et json_decode(). La première, json_encode(), permet de convertir une variable (un tableau associatif par exemple) en une chaîne de caractères au format JSON. La deuxième, json_decode(), fait le contraire : elle recrée une variable à partir d'une chaîne de caractères au format JSON. Ça peut être utile dans le cas de manipulation de JSON avec du PHP !

En résumé

Il est possible de charger un fichier .js en ajoutant un élément <script> via le Javascript. On appelle cela le Dynamic Script Loading.
Cette technique est particulièrement efficace pour charger des données au format JSON.
Comme pour les iframes vues précédemment, il faut utiliser un système de callback pour transmettre les données une fois le fichier Javascript chargé.

Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement