Ajax
Asynchronous Javascript and XML, c'est la technologie qui change le fonctionnement des pages web en permettant de les compléter par des échanges en mode asynchrone avec le serveur. Les applications Web, fonctionnant sur un navigateur, font toutes appel à l'objet XMLHttpRequest pour les échanges avec le serveur ainsi qu'au HTML dynamique, les technologies qui constituent Ajax.
Le nom Ajax a été lancé par Jesse James Garrett dans un article publié sur le site Adaptative Path en 2005. (Ref. et Hist.)
- Qu'est-ce qu'Ajax?
- Histoire.
- Le mode asynchrone.
- L'objet XMLHttpRequest.
- Ajax et formats de données.
- Les frameworks Ajax.
- Documents essentiels.
- Outils.
- Au delà d'Ajax.
Qu'est-ce qu'Ajax?
C'est une combinaison de technologies préexistantes pour créer des sites Web dynamiques fonctionnant comme des logiciels ordinaires:
- XMLHttpRequest. Objet du navigateur utilisable en JavaScript, il lance des requêtes GET ou POST au serveur pour lire un fichier ou envoyer des paramètres.
- JavaScript. Langage de script fonctionnant coté serveur.
- DOM. Le Document Object Model est une réprésentation de la structure d'un document HTML ou XML et permet d'accéder aux éléments dans le document.
- CSS. Les Cascading Style Sheets, les feuilles de styles, définissent la présentation d'une page.
- XML ou autre format de données. Bien que le terme XML soit dans la définition du mot Ajax, l'objet XHR permet aussi bien de lire des fichiers au format texte ou JSON.
Histoire
- En 2001, Microsoft introduit l'objet XMLHTTP dans le navigateur Internet Explorer 5. C'est un objet Active X.
- Il deviendra XMLHttpRequest dans le navigateur Mozilla.
- Microsoft renomme l'objet avec Internet Explorer 6, mais cela reste Active X.
- Le 18 février 2005, l'article Ajax, a New Approach for Web Applications de J.J Garrett lance le mot Ajax.
- La seule existence du terme suffit à rendre ce mode de conception de page Web très populaire, et depuis lors on ne compte plus le nombre de sites web consacré à Ajax.
Le mode asynchrone
Dans une application Web traditionnelle, lorsque l'utilisateur effectue une action, celle-ci est exécutée et le navigateur attend le résultats pour rendre la main à l'utilisateur. Lorsque cette action requiert un échange avec le serveur et une mise à jour de la page, cela occasionne des délais et une attente pour l'utilisateur.
Le mode asynchrone élimine cette attente. Les requêtes au serveur sont lancées sans que soit suspendue l'interaction avec le navigateur et la page est mise à jour lorsque les données requises sont disponibles. Le coté asynchrone est obtenu avec l'objet XMLHttpRequest
L'objet XMLHttpRequest
La création de l'objet
La compatibilité nécessite la création d'un objet Active X pour la série Internet Explorer et d'un objet JavaScript pour les autres navigateur. Pour simplifier, on tente la création de l'un et en cas d'échec, la clause d'exception try conditionne l'exécution de l'autre cas.
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // pour Internet Explorer
}
catch(e) // Echec
{
xhr = new XMLHttpRequest(); // pour les autres navigateurs
}
Fonctionnement de l'interface
Pour faire fonctionner l'objet, on assigne à un gestionnaire d'évènement la fonction à exécuter lorsque l'action est demandée, ce qui ce fait par l'appel de la méthode send().
xhr.onreadystatechange = function() { ... };
xhr.send();
La commande GET
Elle permet de récupérer un fichier sur le serveur.
xhr.open('GET', url);
xhr.send(null);
Dans ce cas la méthode send() n'a aucun paramètre, tandis que le fichier à lire est la paramètre url de la méthode open.
La commande POST
Elle sert à envoyer des données à un script sur le serveur.
xhr.open("POST", url, true);
xhr.send(data);
Le script est le paramètre url, la valeur true impose le mode asynchrone est les données sont fournie en argument de data sous forme de chaîne de variables et de valeur
var data = "nom=valeur&nom=valeur ...";
Plus de détails et démonstrations sur cet objet dans l'article XMLHttpRequest.
Ajax et formats de données
L'objet XHR tel que défini dans la spécification standard prévoit l'emploi de deux attributs différent selon que le fichier chargé est au format XML ou non, sachant qu'un fichier JSON est vu comme un fichier textuel. Ce sont responseXML et responseTxt.
Pour choisir entre les formats, l'article Comparaison de JSON et XML fournit les éléments de décision.
Les frameworks Ajax
L'utilisation d'un framework dispense le programmeur de réécrire les fonctions d'applications Web courantes, elle sont toutes disponibles et testées sur les principaux navigateurs.
Un framework Ajax quand il est en pur JavaScript peut fonctionner sur tout système, il s'exécute coté client. Ou il peut avoir une partie fonctionnant coté serveur, dans différents langages de programmation: PHP, Java, ASP.
Les principaux frameworks JavaScript
- JQuery.
Très populaire, il est utilisé par défaut par le logiciel Wordpress notamment. - Mootools.
Autre framework complet avec de nombreuses extensions. - Yahoo UI.
Propose de nombreux effets graphiques.
Anaa est une librairie légère et simple d'emploi pour utiliser Ajax sans charger un framework complet.
Les frameworks coté serveur
L'emploi de PHP est courant sur les sites en hébergement mutualisé. La Liste des
frameworks Ajax et PHP fournit une comparaison des principaux frameworks PHP.
Le framework JavaFX de Sun permet de réaliser des applications web en Java.
Le Google Web Toolkit permet des construire des programmes en Java qui sont compilés en JavaScript pour fonctionner coté client.
Documents essentiels
- Ajax, une nouvelle approche pour
les sites Web
Traduction de l'article de Jesse James Garrett qui a lancé le nom Ajax, elle est hébergée sur Scriptol.fr. - La première FAQ Ajax
Traduction de la FAQ qui accompagne l'article précédent. - XMLHttpRequest.
Traduction officielle de la spécification par le W3C.
Outils
- Firebug.
Extension à Firefox facilitant le déboguage d'applications Ajax.
Au delà d'Ajax
- Quelle interface pour une application
Web?
Comparaison des solutions offertes actuellement: Ajax, XUL, XAML, Laszlo et aussi les nouveaux standards du Web pour les applications. On envisage aussi les évolutions en cours de ces technologies, car elle sont importantes pour le choix. - Ajax navigable par les moteurs de recherche: Comprendre la spécification de Google.
Google propose un standard: le contenu dynamique sera indexé par les moteurs.