JSON, JavaScript Object Notation
Tutoriel du format simple et universel de fichier d'échange de données
JSON est reconnu par JavaScript, après que l'ECMA ait définit
la fonction eval() qui parse le format, dans le standard ECMAScript, en 1999.
Il a été popularisé par le développement d'Ajax.
Le terme JSON revient souvent lorsque l'on parle d'Ajax. On sait qu'il s'agit
d'un format de fichier alternatif à XML, et ce format à ses
adeptes. Mais qu'est-ce exactement que JSON, et quels sont ses avantages?
Pourquoi JSON
L'intérêt est que l'on n'a plus besoin de parser un fichier XML pour extraire des informations à travers le net, car JSON est reconnu nativement par JavaScript.
JSON et XML
Les avantages de JSON:
- La facilité de lecture.
- La simplicité de mise en oeuvre.
Les avantages de XML:
- XML est extensible.
- Il est largement utilisé et reconnu par tous les langages de programmation.
Noter que XML aussi bien que JSON ne conviennent pas pour représenter
des données binaires de taille importante.
La syntaxe JSON
Les éléments de JSON:
- Un objet: contient des objets ou des variables.
- Une variable scalaire: Number, String, Boolean.
- Un tableau.
- Les valeurs litérales: null, true, false, "chaîne
de caractères", et les valeurs numériques.
L'objet
Il contient un membre ou une liste de membres, chaque membre étant de la forme:
"nom" : "valeur"
La syntaxe de l'objet est:
{ membre, membre, .... }
Le tableau
Contient une ou plusieurs valeurs séparées par des virgules.[ valeur, valeur, ....]
Les valeurs
Une valeur peut être: un objet, un tableau, un litéral (chaîne, nombre, true, false, null).
Et il n'y a besoin de rien de plus à savoir pour créer un fichier JSON!
Exemple de fichier au format JSON
Un exemple simple, définition d'un menu:
il s'agit d'un objet composé de membres qui sont un attribut et un
tableau lequel contient d'autres objets, les lignes du menu.
{
"menu": "Fichier",
"commandes": [
{
"title": "Nouveau",
"action":"CreateDoc"
},
{
"title": "Ouvrir",
"action": "OpenDoc"
},
{
"title": "Fermer",
"action": "CloseDoc"
}
]
}
L'équivalent XML:
<?xml version="1.0" ?>
<root>
<menu>Fichier</menu>
<commands>
<item>
<title>Nouveau</value>
<action>CreateDoc</action>
</item>
<item>
<title>Ouvrir</value>
<action>OpenDoc</action>
</item>
<item>
<title>Fermer</value>
<action>CloseDoc</action>
</item>
</commands>
</root>
Comment utiliser le format
Le fichier permet de charger de l'information stockée dans ce format à partir du serveur ou de transmettre au serveur de l'information dans un fichier de ce format, par exemple, le contenu d'un formulaire qui vient d'être rempli. Il y a donc trois aspects: le traitement par le navigateur, par le serveur, et la transmission des données entre les deux.
Coté client
C'est particulièrement simple JSON faisant partie de la norme JavaScript. Le contenu d'un fichier JSON, ou la définition de données dans ce format sont assignés à une variable, laquelle devient un objet du programme.
Coté serveur
Les fichiers au format JSON s'utilisent dans différents langages de
programmation, notamment PHP et Java grâce à des parseurs qui
permettent d'accéder au contenu, et éventuellement de le convertir
en classes et attributs, dans ce langage.
Le site json.org fournit un parseur en C et donne une liste de parseurs pour
d'autres langages.
L'échange de données
La récupération d'un fichier peut se faire à partir
de JavaScript de plusieurs façons:
- inclusion directe du fichier dans la page HTML au même titre qu'un
fichier .js de JavaScript.
- chargement par une commande JavaScript.
- emploi de XMLHttpRequest.
Le fichier JSON est parsé par la fonction JavaScript eval().
Le transfert d'un fichier au serveur se fait par XMLHttpRequest.
Le fichier au format texte est traité par le parseur du langage de
programmation utilisant le fichier.
Exemple
Le code XMLHttpRequest:
var req = new XMLHttpRequest();
req.open("GET", "fichier.json", true);
req.onreadystatechange = monCode; // la fonction de prise en charge
req.send(null);
Le code JavaScript:
function monCode()
{
if (req.readyState == 4)
{
var doc = eval('(' + req.responseText + ')');
}
}
Utilisation des données:
var nomMenu = document.getElementById('jsmenu'); // trouver un champ
nomMenu.value = doc.menu.value; // assigner une valeur au champ
Comment on accède aux données:
doc.commands[0].title // lire la valeur de "title" dans le tableau doc.commands[0].action // lire la valeur de "action" dans le tableau
Démo simple
Cette démonstration charge un fichier json qui contient un menu et affiche le contenu sur la page. Le détail est dans le code source JavaScript de la page qui utilise le fichier ajax.js.
YAML et JSON
Acronyme de "YAML Ain't Markup Language" (c'est récursif).
Un autre format d'échange de données qui a pour but de sérialiser
les données en objets de langages de programmation. Il utilise l'indentation
pour représenter la structure, ainsi qu'un large ensemble de caractères
spéciaux:: & ! ? - --- [] * etc...
Cela rend les définitions plutôt illisible, au contraire de celles
de JSON.
Une définition JSON constitue un contenu YAML valide (et non l'inverse),
à part les commentaires /* */ qu'il faut remplacer par #.
Ressources
- json.org. Diagrammes de la grammaire, liste de parseurs.
- ECMAScript. La spécification du standard de 1999.
- Le langage JavaScript. Un répertoire de tutoriels et ressources.
- Ajason. Parseur pour PHP 5, c'est aussi un framework Ajax.
- YAML. Site principal de cet autre format d'échange de données.