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?

C'est une combinaison de technologies préexistantes pour créer des sites Web dynamiques fonctionnant comme des logiciels ordinaires:

Histoire

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

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

Outils

Au delà d'Ajax

(c) 2007-2010 Scriptol.fr - Ajax for dynamic pages