Le format JSON, AJAX et jQuery

JSON (JavaScript Object Notation) est une forme d'écriture de données en JavaScript.

Son avantage est de fournir un support pour une écriture simple et légère au format texte, relativement compréhensible par les développeurs JavaScript, mais aussi - et surtout - d'être nativement interprété contrairement au XML qui fait appel à de l'analyse syntaxique et parfois à DOM/XSLT pour accéder à sa structure et à son contenu. Il s'agit donc d'une arborescence de données, inspirée de XML mais dont l'emploi en JavaScript est plus aisé et plus performant, à partir du moment où on en connaît la structure.

On retrouve des facilités d'utilisation de JSON dans des frameworks tels que jQuery avec des fonctions d'aide à la création d'appels AJAX (surtout $.getJSON) pour lequel JSON est bien adapté.

Néanmoins, il existe d'autres implémentations dans une multitude d'autres langages pour se servir de JSON, il n'est pas limité à JavaScript : consultez une liste sur json.org. De même, il est possible d'en générer très facilement du côté du serveur - éventuellement après interrogation d'une base de données - car il s'agit bien d'un format texte pur ce qui rentre dans le champ de compétences de PHP, Java, ASP/.Net et consorts. On évitera son emploi pour manipuler du binaire.

Principe
Les types utilisables sont issus de JavaScript, on retrouve notamment tout ce qui est booléen (Boolean), valeur numérique (Number), chaîne de texte (String), tableau (Array), objet (Object) ou null. On combine le tout au sein d'un objet, le plus souvent, pour utiliser une notation clé:valeur afin de retrouver les variables dans l'arborescence des données.

"clef" : "valeur"

Note : les exemples suivants ne mentionnent pas la balise <script> mais celle-ci est bien sûr obligatoire pour placer du JavaScript au sein d'un document HTML.Note : les exemples suivants ne mentionnent pas la balise <script> mais celle-ci est bien sûr obligatoire pour placer du JavaScript au sein d'un document HTML.

Exemple complet

Avec JavaScript, une déclaration peut être effectuée de la sorte pour stocker un objet dans une variable :Exemple complet

var courses = {
  "fruits": [
    { "kiwis": 3,
      "mangues": 4,
      "pommes": null
    },
    { "panier": true },
  ],
  "legumes":
    { "patates": "amandine",
      "figues": "de barbarie",
      "poireaux": false
    }
};

Voici un équivalent XML à titre d'information :

<?xml version="1.0" ?>
<root>
  <fruits>
    <item>
      <kiwis>3</kiwis>
      <mangues>4</mangues>
      <pommes></pommes>
    </item>
    <item>
      <panier>true</panier>
    </item>
  </fruits>
  <legumes>
    <patates>amandine</patates>
    <figues>de barbarie</figues>
    <poireaux>false</poireaux>
  </legumes>
</root>

On peut visualiser le contenu de la variable sous forme d'arborescence grâce à la console JavaScript et la fonction console.log (sous Firefox équipé de Firebug par exemple, en ayant activé l'onglet Console ou bien dans les Outils de développement des autres navigateurs) :

console.log(courses);