JSON, l’indispensable pour une page web interactive et moderne

Le JSON (JavaScript Object Notation) est un format d’échange de données structurées sous forme de texte. C’est une des technologies phares qui rend une page web interactive et améliore sensiblement l’expérience utilisateur. Le JSON a donc su s’imposer en étant intégré par les principaux navigateurs web, dès 2009 par Firefox et Internet Explorer (dominateurs sur marché à l’époque).

 

Vous est-il déjà arrivé de faire un achat en ligne ? Ou à défaut, vous êtes vous déjà baladé dans les rayons d’un site internet ? Probable, après tout, c’est pratique, vous passez la souris sur le pull qui vous plait pour que celui-ci se retourne. Beaucoup de magasins en ligne soignent leur expérience client sur leur site internet pour inciter celui-ci à finaliser sa transaction. Faire du shopping online n’a pas toujours été aussi agréable.

Section « Chaussures » de votre marque préférée : à gauche, la souris ne survole pas la chaussure, à droite, elle le fait

 

Les requêtes synchrones et asynchrones

Intéressons-nous d’abord à quelques points sur le fonctionnement d’internet. Une recherche sur internet se fait par le protocole HTTP (HyperText Transfert Protocol). Ce protocole fonctionne par un mécanisme de requête et réponse, comme indiqué sur le schéma ci-dessous.

Traitement d’une requête par le protocole http

Un client (vous par exemple) soumet une requête en cliquant sur le lien d’un magasin en ligne. Cette requête est traitée et interprétée par un serveur (hôte du site internet qui vous intéresse) et celui-ci vous renvoie une réponse dans laquelle est inscrit le code HTML de la page correspondante. Traditionnellement, une page web est ainsi chargée suite à une action de l’utilisateur (lorsque vous allez dans la section chaussure, par exemple). Le navigateur web est bloqué tant que la page n’est pas chargée, plus précisément, l’utilisateur doit attendre que l’information demandée soit fournie : il s’agit dans ce cas d’une requête synchrone. Ce type de requête a toutefois ses limites : chaque action nécessite le chargement de toute la page, même si c’est en partie la même. Par exemple, pour les chaussures en tête d’article, changer de vue nécessiterait le rafraichissement de la page. Si la fonctionnalité marche simplement en passant la souris dessus, cela pourrait plutôt être parce que le type de requête envoyée est asynchrone.

Le recours à une requête asynchrone répond donc à cet objectif précis : éviter de transmettre une page web entière à la suite de chaque interaction avec l’utilisateur. La requête HTTP est transmise au serveur sans interrompre la navigation suite à une action utilisateur et seule une partie de la page web est mise à jour quand le serveur a répondu. L’ensemble des technologies qui permettent l’envoi de requêtes asynchrones s’appelle AJAX (Asynchronous JavaScript And XML).

 

Le JSON et ses utilisations

        Le JSON, kékécé?

C’est dans cet intérêt grandissant pour les technologies AJAX que le JSON s’est imposé comme le format standard pour les échanges de données sur le web, au détriment d’ailleurs du XML qui remplissait une fonction similaire. Voyons donc quelle est la structure des données sous format JSON à travers l’exemple suivant :

Un exemple JSON et sa « traduction » en objet JavaScript

La structure n’est pas plus compliquée, un élément JSON est composé d’un nombre de paires « nom » :  « valeur » entre accolades. Le JSON est historiquement un dérivé du langage de programmation JavaScript, qui est également largement utilisé pour rendre une page web dynamique, mais sa structure simple lui a permis d’être supporté par la plupart des autres langages de programmation comme le C++, Java, Python, … JSON garde tout de même une grande complémentarité avec JavaScript (ce qui reste à la base de son succès) car l’on peut passer d’un élément JSON à un objet JavaScript et d’un objet JavaScript à un élément JSON respectivement grâce aux fonctions parse() et stringify() : dans l’exemple précédent, on a les égalités JsonExample = JSON.stringify(JsObject) et JsObject = JSON.parse(JsonExample) qui sont vérifiées.

        Application: un tableau interactif

Mettons donc en application l’utilisation du JSON dans une page web « simple ». Le code suivant, fourni par le site w3schools.com, que vous pourrez trouver ici, semble de prime abord complexe, mais illustre bien comment est utilisé le JSON en pratique. La page affiche un tableau en fonction de la valeur choisie dans le menu (Customer, Products ou Suppliers). Voyons voir sans rentrer dans les détails comment le programme s’exécute.

Une simple page utilisant du JSON pour afficher une liste

Le menu « dropdown » résulte du code HTML contenu dans l’aire orange, il offre 4 choix possibles. Comme l’insinue l’attribut onchange de la première ligne, la fonction change_myselect() s’exécute quand on change de sélection dans le menu. Celle-ci est codée entre les balises <script> en JavaScript. Dans les aires vertes, la requête xmlhttp est préparée pour contacter la page json_demo_db_post.php par le protocole HTTP. La valeur true dans la seconde aire verte indique que la requête est de type asynchrone. La réponse retournée par la page contactée est traitée dans le cadre rouge. Celle-ci est sous format JSON et est bien convertie en objet JavaScript par la fonction JSON.parse(). Dans la suite du code dans l’aire rouge, les données sont extraites de l’objet et agencées sous forme de tableau. Le résultat final apparaît sous le menu dropdown, conformément à ce qui était souhaité : on a utilisé du JSON pour afficher un tableau sans avoir à rafraîchir la page web sur laquelle on est.

 

        Que retenir du JSON?

L’application  du JSON abordée ici reste simple, mais elle permet de voir comment celui-ci peut rendre une page web interactive. Le JSON est efficace pour envoyer des requêtes asynchrones, mais il est surtout simple d’utilisation et relativement peu compliqué à implémenter, c’est pourquoi il s’est imposé comme format standard pour la plupart des moteurs de recherche. La prochaine fois que vous consulterez un produit sur internet, vous vous rappellerez que l’effet de changement de vue en passant la souris dessus est certes probablement dû à une consigne CSS, mais vous pourrez réaliser que bien d’autres fonctionnalités qui rendent cette page interactive et dynamique sont peut-être le fait du recours aux requêtes asynchrones et au format JSON.

 

Team Tech’n’Data – Numa Béguerie

Abonnez-vous à Make it digital

Recevez par email chaque lundi matin l'ensemble des articles publiés sur le blog Make it Digital. La garantie de suivre les dernières évolutions du digital !

Garantie sans spam.

Showing 2 comments

  1. Bonjour,

    J’aimerais apporter une correction à cet article. Firefox et Internet Explorer sont des navigateurs web et non des moteurs de recherche. Parmi les moteurs de recherche, on peut citer Google, Qwant, DuckDuckGo, Ecosia, et bien d’autres encore.

    Un navigateur web est un logiciel tandis qu’un moteur de recherche s’utilise par le biais d’un navigateur web puisqu’il s’agit d’un site web.

  2. Bonjour,

    Merci pour votre remarque. L’imprécision a été corrigée.

    Bien cordialement,
    Numa

Leave a Comment