amis programmeurs, bonjour
aujourd'hui je vous parle de json (prononcer djésonne, comme le prénom Jason a l'anglaise)
json c'est un format d'échange de données. La forme la plus simple pour deux variables c'est
Ca peut etre plus complexe, permet l'imbrication et on peut en faire une structure similaire à XML.
(pour en savoir plus :
http://www.w3schools.com/js/js_json_intro.asp )
Le format json est compris par les langages habituels (php, javascript, C, ...).
Pourquoi vous parler de ça ? parce que c'est bien pratique pour les objets IOT qui échangent des données de façon légère. Surtout si json est associé à son pote AJAX. (
oui ils sont branché mythologie grecque... )
Exemple : le traditionnel "allumer une led" sur une carte electronique depuis une page html. la carte electonique heberge un serveur http.
Dabord en version classique, décrite un peu partout sur le web :
- une page html affiche "led is ON" ou "led is OFF" et un bouton "OFF" ou "ON" selon le cas
- le bouton est un
lien du style href="adresse_de_mon_serveur/action?Led=On" ou "action?Led=Off" selon ce qu'il faut faire.
(j'utilise cette syntaxe classique bien connue d'une commande GET comme les submit de formulaire).- le serveur sur la carte reçoit cette commande, effectue l'action d'allumer ou éteindre la led puis
renvoie la page html mise a jour avec le bon texte.
Vu du client: on a cliqué sur un lien et la page s'est rafraichie. Classique.
C'est simple, mais souffre de quelques limitations :
- si la page html fait d'autres choses que juste allumer/eteindre la led, ça peut etre genant de rafraichir toute la page.
- c'est lourd d'envoyer une page complète juste pour signaler qu'une led est allumée ou éteinte.
- imaginons que la led peut aussi etre allumée par un BP. Pour savoir l'état de la led, la page html doit régulièrement consulter le serveur. Rafraichir la page a chaque fois c'est lourd en trafic et pas terrible visuellement pour l'utilisateur.
Ce serait cool que des informations d'une page html puissent etre rafraichies en consultant un serveur sans que l'intégralité de la page soit chargée. C'est le role d'AJAX et de la commande magique XMLHttpRequest. C'est tres largement utilisé sur le web sur les pages dites "dynamiques". Ce genre de requete peut etre synchrone ou asynchrone ce qui est bien pratique.
Le meme exemple d'allumage de led, cette fois avec AJAX/json :
- la page html affiche toutes sortes de choses dont "led is On" et un bouton Off.
- le bouton 'On' ou 'Off' n'est plus un lien de type href mais un envoi de requete Ajax * en javascript sur l'adresse "mon_serveur/action?Led=Off"
- le serveur fait l'action d'éteindre la led et renvoie en retour non pas une page html complète mais un paquet json du style {"led":" 1} si allumée ou {"led": 0} si éteinte.
- régulièrement, la page consulte le serveur pour savoir si l'état de la led a été changé par un BP extérieur. La page emet un XMLHttpRequest par exemple sur l'adresse "mon_serveur/etatLed". Le serveur répond avec le petit paquet json.
Tout se déroule sans rechargement de la page , par micro échanges de données. L'utilisateur voit le statut changer de façon "smooth" et bien plus rapide que le chargement complet d'une page.
(*) exemple de syntaxe complete en javascript en asynchrone
Code : Tout sélectionner
var req = new XMLHttpRequest();
req.open('GET', '//ipinfo.io/json', true);
req.onreadystatechange = function (e) {
if (req.readyState == 4 && req.status == 200) {
var reponse = JSON.parse(req.responseText);
alert(reponse.ip);
}
req.send(null);
ce petit exemple affiche votre adresse IP. On y voit que javascript comprend le json
Vous pouvez cliquer sur le lien pour voir le paquet json envoyé par ipinfo (et aussi voir ce qu'on sait de vous rien que par le browser) :
http://ipinfo.io/json