AJAX
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
AJAX est un acronyme signifiant Asynchronous JavaScript and XML et qui designe un ensemble de technologies pour créer des pages web dynamiques et qui peuvent communiquer avec un serveur. AJAX est donc une technologie utilisée pour créer des rich internet applications (RIA). La plupart des applications web 2.0 utilisent la technologie AJAX.
L'acronyme a été maintenu en dépit du fait que :
- Les requêtes ne doivent pas être forcément asynchrones
- JavaScript n'est pas la seule manière pour faire ce type de requêtes (mais sans doute la plus fréquente)
- Le format d'échange ne se limite pas à XML, on peut utiliser par exemple du JSON (très fréquent), du HTML, ou même des simples fichiers de texte. Dans des cas plus rares, on peut récupérer également des fichiers plus lourds comme des images ou des streams audio/vidéo.
Pour cette raison, on se réfère de plus en plus à AJAX comme l'une des Web API (voir la page JavaScript pour la liste) qui permet de récupérer de l'information depuis un serveur, mais l'utilisation de l'acronyme est encore très répandue.
Description et intérêt
Par rapport à une application web "traditionnelle" (avec des formulaires et un bouton "submit"), AJAX permet de créer des applications qui ont des interfaces plus riches et qui permettent d'échanger des données avec un serveur sans recharger la page. Cela signifie qu'on peut, par exemple, incorporer progressivement des informations qui sont récupérées sur une autre page, se trouvant même sur un autre site si celui-ci le permet (voir Cross-Origin Ressource Sharing, ou CORS plus bas dans la page).
Originairement, AJAX a été conçu pour donner une expérience plus proche des applications desktop, notamment en ce qui concerne la transition entre états de l'application. Un site web "traditionnel" se compose d'un état différent pour chaque page et pour passer d'un état à l'autre il est nécessaire de cliquer sur un lien qui pointe vers une autre page, et par conséquent enchaîner le mécanisme de réponse/requête à la base du protocole HTTP.
Avec AJAX, il est possible d'envoyer une nouvelle requête HTTP en arrière plan, c'est-à-dire que la requête est envoyée par la page même sur laquelle vous vous trouvez. Le mécanisme peut être décrit de la manière suivante (voir image) :
- Première requête "normale"
- Le navigateur pointe une première fois sur une page à une adresse donnée, cette page est renvoyé en réponse par le serveur qui la héberge. Cette page contient un ou plusieurs script JavaScript qui permettent d'envoyer des nouvelles requêtes sans mettre à jour la page.
- Deuxième requête AJAX
- Le manière décalée, à tout moment et suite à n'importe quel événement, une nouvelle requête AJAX peut être envoyé, dans ce cas au même serveur qui héberge la page principale. Il faudra bien entendu envoyer la requête à une autre page (i.e. à un autre URL du même domaine). Il s'agit souvent d'une page web dynamique, par exemple connectée à une base de données, qui récupère de l'information qui est censée changer dans le temps.
- Troisième requête AJAX
- La même page peut envoyer autant de requêtes qu'elles veut, sur le même serveur ou sur autres. Dans ce cas, il faut que le serveur accepte des requêtes de type AJAX qui vient d'une autre origine (i.e. un autre domaine)
Les requêtes AJAX peuvent se répéter dans le temps, sur le même URL ou sur un autre. Dans tous le cas, le code qui permet de mener à bien une requête asynchrone s'occupe de :
- Identifier la page qui contient les informations d'intérêt (i.e. son URL)
- Envoyer une requête qui peut :
- Demander tout simplement des informations sans en envoyer
- Envoyer des informations sans en demander, par exemple à travers un formulaire, mais également de manière "cachée" comme dans les systèmes de tracking de l'activité
- Envoyer et demander des informations en même temps (e.g. spécifier des informations pour obtenir une réponse spécifique)
- Recevoir une confirmation sur le résultat de la transaction, par exemple si la page n'a pas été trouvée, il manque l'authorization pour pouvoir accéder à la ressource, ou encore le serveur n'accepte pas de requêtes AJAX.
- Incorporer les éventuelles informations reçues en réponse dans la page
Limitation : Cross-Origin Ressource Sharing
Les requêtes AJAX sont gérées directement depuis le navigateur de l'utilisateur et donc c'est comme si l'utilisateur en faisait demande, même si en réalité c'est un script qui décide quelle page pointer pour récupérer de l'information. Ceci pose un problème "éthique" à la fois du côté de l'utilisateur et des développeurs/administrateurs.
- Au niveau utilisateur, la personne ne connait pas les URL sous-jacents qu'elle va visiter en arrière-plan.
- Au niveau développeurs/administrateurs, des ressources appartenant à un site peuvent être demandées par des utilisateurs mais à travers un autre site, donc au final l'utilisateur ne pourrait même pas savoir que l'information appartient au site Y et non pas au site X qu'il est en train de visiter. De plus, des concurrents du site Y pourraient envoyer une grande quantité de requêtes AJAX à travers les navigateurs/ordinateurs des utilisateurs pour le ralentir, ce qui serait plus difficile à bloquer par rapport à un attaque qui vient d'un serveur et qui serait donc plus simple à isoler.
Pour limiter les problèmes soulevés par ces aspects, il y a moyen technique de détecter si une requête est envoyée de manière "traditionnelle", donc si c'est l'utilisateur qui décide de pointer volontairement vers l'URL X (en écrivant l'adresse dans la barre de son navigateur ou à travers un lien hypertextuel), ou si ce fait à travers AJAX.
Ce type d'information permet notamment aux développeurs/administrateurs de décider si accepter ce qu'on appelle le Cross-Origin Ressource Sharing (ou CORS), c'est-à-dire des requêtes qui arrivent d'un navigateur (ou plus généralement un agent), mais de manière détournée à travers un autre site qui ne partage pas la même origine. Les règles pour déterminer si l'origine de la requête est la même peuvent varier, par exemple on peut considérer deux origines différentes :
- Une requête qui arrive sur la page edutechwiki.unige.ch depuis un site www.interested-in-your-page.com (domaines différents)
- Mais également une requête qui arrive sur la page edutechwiki.unige.ch depuis le site tecfa.unige.ch (sous-domaines différents)
Passer par intermédiaire d'une requête server-to-server
La décision d'accepter ou moins des requêtes d'autres origines (et éventuellement quelles origines) est une décision des administrateurs du serveur auquel sont envoyées les requêtes. Souvent même des serveurs/services qui sont disponibles à partager des ressources n'acceptent cependant pas que ce soit fait à travers AJAX, mais imposent que la requête viennent d'un serveur, par exemple à travers une page dynamique côté-serveur (voir comment le faire par exemple avec Node.js). Dans ce cas, on peut toujours bénéficier des requêtes AJAX, mais il faudra faire un détour :
- La page qui a dans son script côté-client des requêtes AJAX pour des ressources qui se trouvent sur une autre origine doit d'abord..
- faire une requête à une page dynamique qui se trouve sur le même serveur...
- Cette page s'occupe à son tour d'envoyer une requête server-to-server et de gérer la réponse
- La réponse est transmise à la page qui a originairement envoyée la requête AJAX
Cette méthode garanti également plus de sécurité et de contrôle sur l'information qui au final est envoyée à l'utilisateur.
Architecture et fonctions
AJAX est ni une technologie en elle-même ni une norme. Ce terme désigne simplement une combinaison de technologies client (pages web):
- XHTML (ou HTML) plus CSS, pour la mise en page
- La norme DOM qui permet à JavaScript de manipuler tous les élément affichés à l'écran.
- L'objet JavaScript XMLHttpRequest qui permet de communiquer avec un serveur sans recharger la page.
- XML est utilisé (parfois) pour transporter les données entre le client (le navigateur) et un serveur.
Du côté serveur, n'importe quel environnment peut être utilisé, comme par exemple PHP
Alternatives:
Exemples d'applications et d'utilisation
La liste serait très longue puisque la plupart des applications web 2.0 de type RIA sont crées avec AJAX.
Il faut aussi rappeler que certaines applications web traditionnelles utilisent quelques composants AJAX, par exemple la plateforme Moodle (version 2008) permet de déplacer des éléments de cours.
Liens et bibliographie
- Asynchronous JavaScript and XML (Wikipédia)
- Web 2.0
- JSON