AJAX qui au départ était un acronyme pour Asynchronous Javascript for XML, est aujourd'hui devenu un ensemble de technologies permettant de créer du contenu dynamique et interactif sans pour autant devoir systématiquement recharger la page.
En gros, donner le maximum de travail au poste client et non plus au serveur. Le terme est apparu en même temps que l'ActiveX de Internet Explorer, l'objet XMLHttpRequest s'est ensuite propagé à l'ensemble des navigateurs, y compris sur Internet Explorer.
Cet objet permet de récupérer des infos sur le serveur sans devoir recharger l'intégralité de la page. Jesse James Garrett en fait une brillante description dans son article A new approach to Web Applications.
La première grande expérience utilisateur de la technologie AJAX reste Google Map, mais d'autres sites ont suivit le mouvement et rapidement les sites Mash Up sont apparus. iGoogle en étant une bonne vitrine.
Les technologies principalement utilisées autour d'AJAX sont des technologies existants depuis plusieurs années et qui avaient données naissance à ce que l'on appelle le DHTML, pour dynamic HTML. A l'époque, avec la guerre des navigateurs le DHTML était un exercice de style difficile à implémenter.
C'est pour cela qu'aujourd'hui avec un DOM standardisé, des CSS de plus en plus supportés et un ECMAScript intégré, les navigateurs contemporains commencent à ne plus être un frein au développement. Voici les technologies gravitant autour d'AJAX :
- xHTML ou XML
- XSL avec XSL(T)
- CSS
- Javascript ou plus précisement ECMAScript
- DOM
- La classe XMLHttpRequest
- Quelques librairies comme Prototype, Script.aculo.us, Rico, Dojo, Mootools....
| Aperçu | Site | Description |
|---|---|---|
 |
Google Map |
Le site de google map sur lequel la majorité des premiers livres sur AJAX se sont fondés, donne une image assez représentative de l'objet XMLHttpRequest au coeur de la technologue AJAX. Le rechargement en temps réel des parties de la carte atteintes par l'interaction de l'utilisateur et sans avoir à recharger entièrement la page. |
 |
NetVibes |
NetVibes est un des premiers sites à avoir utilisé de manière riche et interactive les diverses technologies qui gravitent autour d'AJAX. NetVibes n'en fini pas de servir d'exemple en commencant par iGoogle. Rendez vous sur le site et créez des onglets, manipulez les fenêtres, interagissez avec, changez le titre à la volée, ajoutez des widgets... bref, tout est permis ou presque, en temps réel et sans jamais devoir enregistrer. |
 |
iGoogle | Quasi copie conforme de NetVibes sur le principe, iGoogle est également une interface personalisable remplie de widget. En fait ces deux sites vont plus loin que le simple fait d'utiliser des technologies qui composent AJAX. Ce sont de véritables sites MushUp. |
 |
RATP |
La saisie assistée est également une possibilité qu'offre AJAX. Le site de la RATP en use et abuse lorsque vous souhaitez saisir le nom d'une station, ou encore le site de réservation Voyages-sncf. La différence avec une aide à la saisie qui aurait mémorisée vos anciennes entrées, ne pourrait pas afficher des entrées que vous n'avez pas encore utilisées. |
Prérecquis et fichiers nécessaires
Il n'est pas nécessaire d'avoir des prérecquis particuliers pour suivre ce tutorial, au fil des pages et des chapitres, vous serez invités à éventuellement compléter vos acquis si cela était nécessaire, par des tutoriaux complémentaires.
De manière générale, pour pratiquer AJAX dans de bonnes conditions, cela demande une utilisation correcte et propre de HTML, ou xHTML, ainsi que des CSS. Une bonne sémantique et une absence de divite ou de classite sont fortement conseillées. Tout autre complément comme HTTP, XML, Javascript, DOM ne peuvent qu'être utiles. Les fichiers nécessaires aux divers exercices, seront disponibles au fur et à mesure de leur nécessité.
De manière générale, les divers tutoriaux de puce et média qui peuvent contribuer à améliorer le contenu de ce présent tutorial peuvent être:
- Les standards du web
- Réalisation d'un premier site
- Les bases du HTML
- Les bases de CSS
- Les bases du DOM
- Introduction à Javascript
Préparation du navigateur
Quelque soit le navigateur que vous allez utiliser, pensez à ne pas sous exploiter ses possibilités. Pour les captures écrans et les tests réalisés au cours de ce tutorial, nous utiliserons Firefox, ainsi que les extensions suivantes :
Si vous utilisez un autre navigateur, pensez à découvrir les diverses extensions qu'il propose. Notament le menu Debug de Safari et la Developer ToolBar de Internet Explorer. Quoiqu'il en soit, et quelque soit le navigateur que vous utilisez, pensez à en installer les principaux, afin de pouvoir vous assurer du bon fonctionnement de vos pages en fonction des divers environnements.
Le DOM Inspecteur
La console Javascript
Firebbug
Présentation de l'approche
Le principe de ce tutorial sera de centraliser un fil conducteur pour des constructions de pages utilisant des technologies AJAX. Parfois, certains chapitres pourront renvoyer vers des tutoriaux d'initiation, généralement cités ci-dessus dans la partie Prérecquis et fichiers nécessaires, afin de ne se concentrer que sur les bases de l'utilisation des technologies entre elles. Faire du transversal et non du vertical.
