JSON, JavaScript Object Notation

JSON ( jison ou jayson, jason en anglais) 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 a ses adeptes. Mais qu'est-ce exactement que JSON, et quels sont ses avantages?

Sommaire

JSON vs. XML

Les avantages de JSON:

Les avantages de XML:

Noter que XML aussi bien que JSON ne conviennent pas pour stocker directement des données binaires de taille importante.

La syntaxe de JSON

Les éléments de JSON sont:

  1. Un objet: contient d'autres objets ou des variables.
  2. Une variable scalaire: Number, String, Boolean.
  3. Un tableau.
  4. 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": [ 
      {
          "titre": "Nouveau", 
          "action":"CreateDoc"
      }, 
      {
          "titre": "Ouvrir", 
          "action": "OpenDoc"
      }, 
      {
          "titre": "Fermer",
          "action": "CloseDoc"
      }
   ] 
}

L'équivalent XML: 

<?xml version="1.0" ?>
<racine>
  <menu>Fichier</menu>
  <commandes>
     <item>
         <titre>Nouveau</titre>
         <action>CreateDoc</action>
     </item>
     <item>
         <titre>Ouvrir</titre>
         <action>OpenDoc</action>
     </item>
     <item>
         <titre>Fermer</titre>
         <action>CloseDoc</action>
     </item>
  </commandes>
</racine>

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.commandes[0].titre      // lire la valeur de "titre" dans le tableau
doc.commandes[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 du code est dans l'archive.

Code source

YAML vs. 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

© 2006-2021 Xul.fr