Introduction à Json

Depuis quelques années, on voit proliférer l’utilisation du XML au sein des applications. Il est utilisé pour gérer la configuration, le stockage de données, les flux de données, j’en passe et des meilleures. Plus récemment, on a utilisé le XML pour gérer les dialogues entre serveur web et explorateur internet avec l’avènement des technologies AJAX / web 2.0. Pour rappel, AJAX (Active JavaScript Application for XML) permet d’établir un canal séparé pour les échanges client / serveur sur le web. Dans ce domaine XML montre ses limites :

• Chargement et manipulation vite compliqués dans les explorateurs : la plupart du temps, il faudra parser le XML sous forme de DOM et le parcourir ensuite ce qui nécessite beaucoup d’appels de fonction.
• Aucune norme partagée : vous devez gérer les traitements au cas par cas selon l’explorateur utilisé.
• Taille conséquente : par nature, le XML est lourd, il contient beaucoup de données dupliquées et a tendance à générer des congestions réseau. Bref une utilisation inadaptée de la bande passante.

C’est pour répondre à ces limites avérées du XML qu’une notation alternative est née à destination des applications web.
JSON (JavaScript Object Notation) utilise la notation des objets JavaScript pour transmettre de l’information structurée. Léger et au format texte, il est dérivé de l’écriture des langages standards de type ECMAScript (norme ISO/IEC 16262). Inscrit au Network Working Group de l’IETF sous la RFC 4627. Il est souvent utilisé pour simplifier et alléger les accès à des services web depuis les navigateurs.

Syntaxe

JSON se base sur deux structures :

• Une collection de couples nom:valeur.
• Une liste de valeurs ordonnées.

Ces mêmes éléments représentent 3 types de données.

• Objet :

Un objet est défini par un ensemble d’associations clé/valeur. Il commence par une accolade ouvrante ‘{‘ et se termine par une accolade fermante ‘}’. Chaque nom est suivi de deux-points ‘:’ et les couples nom/valeur sont séparés par des virgules ‘,’.

• Tableau :

Un tableau est une collection de valeurs ordonnées. Il commence par un crochet ouvrant ‘[‘ et se termine par un crochet fermant ‘]’. Les valeurs sont séparées par des virgules ‘,’.

• Valeurs :

Une valeur peut être soit une chaîne de caractères entre guillemets, soit un nombre, soit true ou false ou null, soit un objet soit un tableau. Ces structures peuvent être imbriquées.
Une chaîne de caractères est une suite de zéro ou plus caractères Unicode, entre guillemets, et utilisant les échappements avec antislash. Un caractère est représenté par une chaîne d’un seul caractère. Une chaîne de caractères est très proche de son équivalent en Java.
Un nombre est très proche de ceux qu’on peut rencontrer en Java, notez toutefois que les formats octal et hexadécimal ne sont pas utilisés.

Exemple

{ "menu":
   {   "id": "file",
       "value": "File",
       "popup": {
           "menuitem": [
                 {"value": "New", "onclick": "CreateNewDoc()"},
                 {"value": "Open", "onclick": "OpenDoc()"},
                {"value": "Close", "onclick": "CloseDoc()"}
         ]
      }
   }
}

la même expression en XML:

Avantages

• Simple : Le chargement et la manipulation d’un arbre JSON en JS, est triviale:

// Une chaîne JSON contenant une liste de patients
var myJsonString = '{"patients" : [{"nom":"John", "age": "32"},{"nom":"Rosie", "age":"25"}]';
var obj = eval (myJsonString);
alert (obj.patients[0].nom);

Ce code charge une chaîne JSON, la transcrit en objet natif JavaScript et affiche dans une boîte de dialogue le nom du premier patient.

• Portable : vous n’aurez aucun traitement spécifique par browser à écrire, il suffit d’avoir le support JavaScript.
• Léger : optimise l’utilisation de la bande passante des serveurs et minimise la charge mémoire des explorateurs. A arbre égal, le JSON sera toujours plus petit que son équivalent XML.
• Indépendant : tout comme son aîné, bien que nativement supporté en JavaScript, il existe des API dans toutes sortes de langages de lisp à Java.

Inconvénients

• Espace de noms: JSON ne supporte pas les espaces de noms comme XML. On ne peut pas utiliser des attributs de même nom appliqués à différents contextes.
• Validation: Il n’existe pas, à ce jour, d’équivalent au XSD / DTD pour JSON. Impossible de valider autre chose que la syntaxe et les valeurs fournies. On manque ici clairement d’un système pour valider la structure de l’arbre et contrôler plus finement les valeurs à l’aide de patterns par exemple.
• Jeunesse: N’oublions pas que JSON est jeune, il faudra donc porter un oeil attentif au choix des API les plus matures.
• Sécurité: ATTENTION à l’injection de code malicieux dans une chaîne JSON. Il faut s’assurer de bien échaper les quote et double quote.

Dans notre exemple, on utilisera Prototypejs pour la partie cliente et FlexJSON pour la partie serveur.

Cas pratique

Le but ici est de mettre en place un simple service web pour retrouver un contact depuis un carnet d’adresses et afficher ses noms et courriels. Pour améliorer le look’n’feel de l’application, on utilisera la librairie JavaScript http://script.aculo.us.

On commence par définir un POJO Contact avec un identifiant, un nom et un courriel. Les contacts pourraient aussi bien venir d’une base de données.

package com.xebia.jsondemo;

public class Contact {

	private int id;

	private String name;

	private String email;

	public Contact(int id, String name, String email) {
		super();
		this.id = id;
		this.name = name;
		this.email = email;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String toString(){
		return "" + id+" "+name+" " + email;
	}
}

Pour fournir les instances de Contact au client, on met en place une simple JSP pour ne pas alourdir le code. On pourrait aussi bien intégrer le code de serialisation ailleurs dans un bean, un EJB ou un POJO (liste non exhaustive).

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"
 import="java.util.*,flexjson.*,com.xebia.jsondemo.*"
%>
<%
	// Récupérer la chaîne recherchée
String searchKey = request.getParameter("value");

	// Construire le carnet d'adresses
Vector contacts = new Vector();
contacts.add( new Contact(0, "Jean Dupond", "jean@dupond.fr"));
contacts.add( new Contact(1, "Christophe Dupond", "christophe@dupond.fr"));
contacts.add( new Contact(2, "Séven Le Mesle", "slemesle@gmail.com"));
contacts.add( new Contact(3, "John Doe", "jdoe@gmail.com"));
contacts.add( new Contact(4, "Jack Lim", "jlim@lim.com"));
contacts.add( new Contact(5, "Patricia Smith", "psmith@yahoo.com"));
contacts.add( new Contact(6, "George Cohen", "gcohen@msn.com"));

%>
<%= /* Serialization des contacts trouvés en JSON */
	new JSONSerializer().serialize(contacts)  %>

Faites bien attention à définir le contentType à « application/json; charset=UTF-8 », par sécurité notre client n’acceptera que ce type de contenu. Maintenant que le service est mis en place,
il nous manque un client pour en tirer partie.

Json Auto-complete demo

Enter a name: 


  Working ....

On ne présente ici que la partie intéressante de la page HTML pour capter le JSON, le lier à un objet JavaScript et le manipuler pour rendre les informations qu’il contient. La partie lancement de la requête AJAX est entièrement prise en charge par Ajax.Autocompleter.

L’ensemble des sources est disponible dans le repository SVN de Xebia France, branche /svn/trunk/json/JsonDemo .

Exercice

Ajouter le support des avatars pour présenter une image associée à chaque contact. Vous devrez ajouter l’URL de l’image dans le contact, et l’afficher dans la liste déroulante ainsi qu’après sélection par l’utilisateur.
Comme vous l’avez remarqué, le tri alphabétique des contacts n’est pas assuré. Le filtrage de ces derniers en utilisant la chaîne ‘searchKey’ non plus. Pour finir ce petit exercice, implémentez les deux fonctionnalités manquantes.

Conclusion

Json semble s’imposer aujourd’hui dans les applications RIA, il est aussi très utilisé pour les développements orientés REST. Les acteurs principaux du web le pousse de plus en plus sur le devant de la scène Yahoo! et Google propose déjà sinon l’intégralité, au moins la grande majorité de leurs services web via des interfaces doubles XML et Json. On pourra aussi s’intéresser au RPC appliqué à Json.

Références

• JSON
• FlexJSON
• Prototypejs
• http://script.aculo.us