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
- de 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)
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
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