le JSON : un pont entre tous les langages

* Amis développeur confirmé, passe ton chemin 🙂 *

 

J’entends souvent dans mon entourage des trucs qui me perturbent par rapport au JSON, c’est pourquoi je me suis dit qu’une petite piqure de rappel concernant ce formidable outil pourrait peut être démystifier quelque chose d’aussi bête et simple que le JSON. 

JSON c’est quoi ?

Non ! le JSON n’est pas un langage, ni une forme de magie obscure et laborieuse, c’est juste un format de données, c’est a dire un texte à plat qui respecte une certaine structure pour véhiculer facilement et légèrement les informations.

Nb: En bon frenchy, le JSON se prononce “dJisône” et signifie “JavaScript Object Notation” car il est issue de la notation objet utilisée en javascript.

 

Les gros point fort du JSON:
* Étant donné qu’il s’agit d’une simple chaine de caractère, il fonctionne sous tous les environnements et tous les langages qui peuvent gérer du texte (et ça fait un paquet d’endroits ^^)
* Il s’apprend en 5 minutes tant sa syntaxe est courte à connaitre
* Il est moins verbeux, donc plus léger que le XML tout en restant lisible pour l’être humain
* Il permet de transmettre tout types de données (tableau, chaine, entier, objet …)
* Étant donné qu’il est quasi universel, il est très simple de dialoguer d’un langage à un autre via JSON (PHP vers Javascript est un exemple courant)

Voyons un peu la syntaxe …

 

La syntaxe de base

{ = Définis que le contenu englobé est un objet
ex : {objet json}


: = Définis une valeur
ex : {age:25}


ou = Définis que la la valeur est textuelle (on ne les mettra pas pour les valeurs numérique)
ex : {name:”Idleman”}


, = sépare un attribut d’un autre
ex : {name=”Idleman”,age:25}


[ = définis que le contenu englobé est un tableau
ex : {name=”Idleman”,age:25,hobby:[“informatique”,”musique”,”sport”,”sorties”]}

 

C’est tout pour la syntaxe! Il est maintenant possible de faire des combinaisons en englobant des objet dans d’autres
ex : {users:[{“name”:”Idleman”,”age”:25},{“name”:”IdleGirl”,”age”:20}]}


Il est possible d’imbriquer des objets ou des tableaux en tant que valeurs d’autres objets, tableau ou attributs à l’infini.

 

Le JSON en Javascript

Comme nous l’avons spécifié, le javascript est le langage “natif” du JSON,  une chaine JSON est tout simplement construite de la même façon qu’un objet javascript.

ex : var bdd = {users:[{“name”:”Idleman”,”age”:25},{“name”:”IdleGirl”,”age”:20}]}; 

Vas créer un objet javascript contenants plusieurs utilisateurs et accessible de cette façon

<script type="text/javascript">
var bdd = {users:[{"name":"Idleman",age:25},{"name":"IdleGirl","age":20}]};
alert(bdd.users[0].name); // retournera "Idleman"
alert(bdd.users[1].age); // retournera "20"
</script>

 

Le JSON en PHP

Le JSON étant une chaine de texte, il est géré de la même façon partout, cependant certains langages comme PHP mettent a disposition des outils pour nous simplifier encore la vie dans la construction de la chaine.

Aussi PHP propose t’il depuis la V5.1 (si ma mémoire est bonne, à vérifier) les fonction json_encode() et json_decode() qui permettent de traduire un tableau ou un objet php directement en chaine JSON et réciproquement.

ex :

 

     <?php
$bdd = array();
$bdd['users'][0]['name'] = 'IdleMan' ;
$bdd['users'][0]['age'] = 25 ;

        $bdd['users'][1]['name'] = 'IdleGirl' ;
$bdd['users'][1]['age'] = 20 ;

        //Vas retourner "{users:[{"name":"Idleman","age":25},{"name":"IdleGirl",age:20}]}"
echo json_encode($bdd);

        $newBdd = json_decode("{"users":[{"name":"Idleman","age":25},{"name":"IdleGirl","age":20}]}");
//Vas retourner la structure du tableau newBdd avec nos utilisateurs
var_dump($newBdd);

       ?>

 

Le JSON dans les autres langages
Chaque langages gère nativement ou non le JSON, pour la plupart il existe des librairies toutes faites (C#, Python, Java, C++ …)
pour d’autre c’est géré en natif (javascript, PHP …) au final très peu de langages ne vous proposeront rien du tout, et pour ceux la,
il vous faudra construire vos chaines JSON à la main.

 

Exemple utile utilisant JSON, PHP, Javascript, et de l’AJAX(JQuery)

Histoire de comprendre l’intérêt de JSON dans vos sites web, voila un petit exemple de récupération des utilisateurs dans une base de données.
Javascript vas appeler une page PHP via Ajax, PHP vas retourner une chaine JSON contenant tous les utilisateurs de la base, enfin Javascript vas récupérer
cette chaine et afficher les utilisateurs sur la page.

La page PHP “users.php”

<?php
// On considère que ces informations viennent d'une base de données
$bdd = array();
$bdd['users'][0]['name'] = 'IdleMan' ;
$bdd['users'][0]['age'] = 25 ;

$bdd['users'][1]['name'] = 'IdleGirl' ;
$bdd['users'][1]['age'] = 20 ;
//On renvoie la chaine JSON contenant toutes les infos
echo '('.json_encode($bdd).')';
?>

 

La Page HTML/JAVASCRIPT

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mes utilisateurs</title>
</head>
<body>

<button onclick="loadusers();">Charger les utilisateurs</button>
<ul id="userContainer"></ul>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

   function loadusers(){
$.ajax({
url: "users.php",
type:"GET",
success: function(response) {
var bdd = eval(response);
for(i=0;i<bdd.users.length;i++){
var user = bdd.users[i];
$('#userContainer').append('<li><b>Nom:</b>'+user.name+'  <b>Age:</b>'+user.age+'</li>');
}
}
});
}

</script>
</body>
</html>

 

 

Pour les flemmards du copier/coller, les sources sont téléchargeable ici.

 

Plus d’infos sur www.json.org🙂

 

16 réactions au sujet de « le JSON : un pont entre tous les langages »

    • Idleman Auteur ArticleRéponse

      Arf, faut définitivement que j’arrête la ganja, (ou alors que je me relise une fois de temps en temps ^^) merci beaucoup je corrige ça

  1. bfontaine Réponse

    Note: la syntaxe ‘toto’ pour les chaînes de caractères est valide en JS mais pas en JSON. Donc

    { 'foo' : 'bar' }

    n’est pas valide en JSON, tout comme

    { foo : "bar" }

    vu que les clefs sous forme de chaînes de caractères doivent obligatoirement être entourés de guillemets.

    • Idleman Auteur ArticleRéponse

      Merci pour la précision :), je l’ignorais, les formes indiquées ayant toujours fonctionné quel que soit le langage impliqué chez moi (je suppose que la plupart supportent cette erreur de notation)

  2. Bronco Réponse

    Excellent résumé: en effet, pourquoi se peler les rouleaux à utiliser xml ou un système de stockage perso ^^
    Merci !

  3. Arthur Réponse

    Merci pour ce petit tutoriel, j’avais un peu de mal à voir l’intérêt du JSON jusqu’à maintenant.

    Et pire, je le prononçais “jissone” ! 😀

    • Idleman Auteur ArticleRéponse

      Ha ha ha, et comment tu sais que le code ne ment pas ? Ou pire, que c’est toujours la même qu’à l’époque ? Niark niark niark (je suis maléfique) ! Tu vas bien Arnaud ? Je savais pas que tu passait de temps à autres ici :D, vas falloir que je surveille mon langage :p

  4. Alain Ternaute Réponse

    [troll]Web Of Trust ont pompé leur logo sur celui de JSON ou c’est le contraire ?[/troll]

    • Idleman Auteur ArticleRéponse

      ah oui j’avais jamais vu XD !! Historiquement JSON est apparus en premier, après j’ignore ce qu’il en est de l’ancienneté de leurs logo ^^

  5. Jack Jones Réponse

    En bon English, le J se prononce Djey [dʒeɪ] et pas Dji [dʒiː]. On dit un DeeJay et pas un DeeDji !

Répondre à bfontaine Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.