AJAX combineJavaScript etDOM, qui permettent de modifier l'information présentée dans le navigateur en respectant sa structure, lesAPIFetch etXMLHttpRequest, qui servent au dialogue asynchrone avec le serveur web, ainsi qu'un format de données (XML ouJSON), afin d'améliorer maniabilité et confort d'utilisation desapplications internet riches. XML, cité dans l'acronyme, était historiquement le moyen privilégié pour structurer les informations transmises entreserveur web et navigateur ; de nos jours le JSON tend à le remplacer pour cet usage.
Dans les applications web précédant l'usage d'AJAX, le navigateur charge unepage Web complète après chaque manipulation de l'utilisateur. L'utilisateur doit attendre l'arrivée de la réponse pour effectuer d'autres manipulations.
En utilisant AJAX, le dialogue entre le navigateur et le serveur se déroule la plupart du temps de la manière suivante : un programme écrit en langage de programmationJavaScript, incorporé dans une page web, est exécuté par le navigateur. Celui-ci envoie en arrière-plan des demandes au serveur web, puis modifie le contenu de la page actuellement affichée par le navigateur web en fonction du résultat reçu du serveur, évitant ainsi la transmission et l'affichage d'une nouvelle page complète.
La méthode classique de dialogue utilise des mécanismes propres auWorld Wide Web, qui sont incorporés dans tous les navigateurs ainsi que lesrobots d'indexation, et ne nécessite pas de programmation. Au contraire, le fonctionnement d'AJAX nécessite de programmer en JavaScript les échanges entre le navigateur et le serveur web. Il nécessite également de programmer les modifications à effectuer dans la page web à la réception des réponses, sans quoi les dialogues se font à l'insu de l'utilisateur[1].
En AJAX, comme le nom l'indique, les demandes sont effectuées de manièreasynchrone : le navigateur web continue à exécuter le programme JavaScript alors que la demande est partie, il n'attend pas la réponse envoyée par le serveur web et l'utilisateur peut continuer à effectuer des manipulations pendant ce temps[2].
AJAX est en fait introduit parXMLHttpRequest, initialement uncomposantActiveX créé en 1998 parMicrosoft pour leur application webOutlook Web Access, puis il a été ajouté à la normeECMAScript relative au langage JavaScript et mis en œuvre sur la plupart des navigateurs du marché entre 2002 et 2005[1]. L’API Fetch est un substitut moderne à XMLHttpRequest utilisant les atouts d’ECMAScript 6 pour pallier les nombreux défauts de cette ancienne API. Il fait notamment usage du système de promesses (Promises) pour éviter l’usage anarchique defonctions de rappel.
Le terme "AJAX" a été introduit parJesse James Garrett (informaticien américain), le, dans un article sur le site webAdaptive Path[3]. Depuis, il a rapidement gagné en popularité.
La méthode AJAX consiste à utiliser de manière conjointe diverses techniques normaliséesouvertes et disponibles sur la plupart des navigateurs du marché :
JavaScript, unlangage de programmation incorporé dans les navigateurs. Les programmes écrits dans ce langage sont exécutés par le navigateur ; il est utilisé en particulier pour exploiter leXMLHttpRequest et leDOM. C'est la clé de voûte de l'AJAX.
LeDOM (sigle de « Document Object Model ») c'est une collection d'objets, utilisée pour l'affichage dynamique et l'interaction avec les données, où chaque objet représente un élément structurel ou visuel d'une page web ou d'un documentXML. Il est utilisé à partir d'un langage deprogrammation orientée objet tel que JavaScript pour inspecter et modifier le contenu des pages web.
XMLHttpRequest est unobjet de programmation, utilisé dans les programmes en langage JavaScript pour assurer la communication entre le navigateur et un serveur web. Il est utilisé pour la communication asynchrone : envoyer les requêtes vers le serveur et déclencher des opérations lors de la réception de réponses de celui-ci. Cette API tend à être dépréciée au profit de l’APIFetch introduite plus récemment en JavaScript et qui s’intègre mieux dans l’écosystème de développement.
XML (sigle deanglais :Extensible Markup Language) est unlangage de balisage etJSON (sigle deJavaScript Object Notation) est unformat de données inspirée de lasyntaxe du langage JavaScript. Ils sont utilisés pour structurer les informations envoyées par le serveur web. Le format XML est accompagné deXSLT pour sa manipulation.
Les applications web classiques permettent aux utilisateurs d'effectuer des choix (suivre un lien, remplir et valider un formulaire) à la suite de quoi une requête est envoyée au serveur web. Le serveur répondra à la requête en envoyant une page web. Une page web est envoyée en réponse à chaque manipulation, et la transmission de la page web entre le serveur et le navigateur provoque un temps de latence d'autant plus grand que la page est riche en contenu et en présentation (tableaux, couleurs, polices de caractères…).
Dans les applications web en AJAX, une page web est envoyée une seule fois. La page envoyée contiendra un programme écrit en langage JavaScript. Lors des manipulations effectuées sur la page par l'utilisateur, le programme en JavaScript envoie des requêtes au serveur web, le serveur répondra aux requêtes en envoyant un document au formatXML, ce document ne contient pas d'information de présentation et le nombre d'informations qu'il contient est souvent réduit, d'où des temps de latence plus réduits que ceux d'une application web classique.
L'utilisation de JavaScript permet de provoquer des requêtes lors de manipulation qui autrement n'en provoqueraient pas (du fait des mécanismes utilisés). Ce qui permet de mettre en œuvre des fonctionnalités qui se rencontrent uniquement dans lesRich Internet Applications.
Les feuilles de styleCSS sont en outre utilisées dans les différentes pages d'une application web AJAX, dans le but de diminuer le temps de latence lors de l'envoi initial de la page. Les informations de présentation sont extraites des différentes pages web de l'application, et placées dans une feuille de style unique, utilisée pour les différentes pages de l'application.
Lesrobots d'indexation, utilisés par lesmoteurs de recherche, exploitent les mécanismes intégrés du World wide web — ceux exploités par les applicationsclassiques — et n'exécutent pas tous les programmes en JavaScript. Par conséquent, le contenu des pages créées par un programme JavaScript ne sera pas ajouté à l'index du moteur de recherche. Le même problème se pose avec les produits concurrents commeAdobe Flex etMicrosoft Silverlight.
Une trop grande réactivité peut finalement à la fois augmenter inutilement le trafic réseau et la charge du serveur et nuire à l'ergonomie d'un site web en rafraîchissant inutilement une page avant que celui qui la consulte ait fini de formuler sa requête, ce rafraîchissement pouvant en retarder la saisie. Par exemple[4] :
L'interface web d'un serveur FOG (logiciel) n'attend pas la fin de la saisie par l'utilisateur d'unechaîne de caractères correspondant à un critère de sélection et fait des mises à jour inutiles de la page qui retarderont l'affichage de l'information demandée une fois qu'elle aura été saisie entièrement.
Un site web vendant de nombreuses références d'ampoules LED permet de sélectionner la gamme de consommation désirée en cochant des cases. Mais le réaffichage de la page dès que l'utilisateur coche ou décoche une case retarde la saisie complète de son choix lorsque plusieurs cases doivent être cochées ou décochées.
Lors de la pandémieCovid-19, le site duCNED était utilisé pour desvidéoconférences entre des professeurs et leurs élèves. Mais il était nécessaire d'autoriser les accès des élèves en attente et à raison d'un clic par élève qui entraînait le réaffichage de la page, avant de pouvoir faire de même avec l'élève suivant. Autoriser une classe complète prenait plusieurs minutes.
On peut de toutes façon constater qu'un serveurPHP ne met en général qu'une fraction de seconde pour préparer une page, alors que la préparation d'une page côté client en exécutant du javascript est beaucoup plus lente, surtout si l'ordinateur client est obsolescent ou peu performant.
Pour faciliter l’utilisation de ces techniques, de nombreuxframeworks ont été mis en place. Il s’agit en général d’un ensemble de bibliothèques JavaScript permettant de réaliser les traitements asynchrones et d’offrir une ergonomie avancée grâce à une palette d’objets graphiques aboutis.
Dans un souci d’industrialisation, nombre de ces frameworks ont été couplés à des frameworks de conception web.
On estime à plus de cinq cents le nombre de frameworks JavaScript actuels.Les principaux sont dans l'articleFrameworks AJAX.
Le premier résultat de cette initiative est l'AJAX Toolkit Framework[6] (ATF), un projet qui vise à proposer des outils pour le développement d'applications AJAX dans l'outil de développementEclipse. Ce projet s'appuie entre autres sur la contribution initiale d'IBM et diversframeworks AJAXopen source (tels queDojo ou Rico).
