Rappels sur l’AJAX
Le terme AJAX est l’abréviation de “Asynchronous JavaScript and XML”. L’AJAX n’est pas un langage de programmation mais correspond plutôt à un ensemble de techniques utilisant des technologies diverses pour communiquer avec le serveur (notamment envoyer et récupérer des données) de façon asynchrone, c’est-à-dire sans avoir à recharger la page.
Avant l’utilisation de code asynchrone et l’AJAX, la moindre action de l’utilisateur (envoi ou demande de données) résultait par le chargement d’une nouvelle page envoyée par le serveur. Ce processus était inefficace, lent, et peu agréable pour l’utilisateur.
Cette situation a amené à la création d’un objet nommé XMLHttpRequest permettant aux navigateurs de communiquer avec le serveur sans nécessiter de rechargement de page. Cet objet a été au coeur de l’AJAX pendant des années et est aujourd’hui encore très utilisé. A sa création, l’AJAX utilisait les technologies suivantes qui lui ont donné son nom :
- Le XML pour l’échange de données avec le serveur ;
- L’objet
XMLHttpRequestpour la communication asynchrone ; - Le JavaScript pour afficher les données de manière dynamique et permettre à l’utilisateur d’interagir avec les nouvelles informations ;
- Le HTML et le CSS pour la présentation des données.
Aujourd’hui, le XML a été largement délaissé au profit du JSON (JavaScript Object Notation) qui est une notation qui permet d’échanger des données relativement simplement tandis que l’objet XMLHttpRequest est lentement en train de laisser sa place à la nouvelle API Fetch.
“L’AJAX” ou plutôt “l’Ajax” est aujourd’hui un terme générique utilisé pour désigner toute technique côté client (côté navigateur) permettant d’envoyer et de récupérer des données depuis un serveur et de mettre à jour dynamiquement le DOM sans nécessiter l’actualisation complète de la page.
Ajax et jQuery
Les demandes Ajax sont déclenchées par du code JavaScript : très schématiquement, on envoie une requête au serveur et on met en place des gestionnaires d’événements avec des fonctions de rappel pour traiter la réponse renvoyée.
Comme l’Ajax fait appel à différentes technologies, cependant, l’implémentation d’un navigateur à l’autre peut être différente et un même code peut donc provoquer des comportements différents.
jQuery fournit ici un support Ajax censé harmoniser ces différences et faire en sorte que nos requêtes s’exécutent de la même manière avec tous les navigateurs. jQuery met notamment à notre disposition une méthode globale $.ajax() et des méthodes comme $.get(), $.getScript(), $.getJSON() ou $.post() pour effectuer nos différentes opérations.
Méthodes d’envoi et format de données
Les deux méthodes les plus courantes pour envoyer une demande à un serveur sont GET et POST.
On utilisera GET pour effectuer des opérations non destructives, c’est-à-dire pour des requêtes où on se contente de récupérer des données du serveur sans les modifier.
A l’inverse, on utilisera POST pour effectuer des opérations destructives, c’est-à-dire pour des requêtes dont le but est de modifier des données stockées sur le serveur.
Lorsqu’on envoie une requête, il faut généralement préciser dans quel format on souhaite recevoir la réponse du serveur. On va pouvoir faire notre choix parmi les formats suivants :
- text = permet de transporter des chaines de caractères ;
- html = permet de transporter des blocs de code HTML qui vont être placés dans la page ;
- script = permet d’ajouter des scripts à la page ;
- json = permet de transporter des données au format JSON (des chaines, des tableaux ou des objets) ;
- jsonp = permet de transporter des données au format JSON provenant d’un autre domaine ;
- xml = permet de transporter des données au format XML.
On utilisera généralement du JSON (JavaScript Object Notation) car c’est le format le plus flexible. Le JSON est particulièrement utile lorsqu’on souhaite envoyer du HTML et d’autres données en même temps.
