AJAX

Qu'est-ce que l'AJAX

AJAX (Asynchronous JavaScript And XML) n'est pas une technologie en elle-même. C'est en fait un ensemble de plusieurs technologies regroupant :

• HTML (ou DHTML)
• CSS (feuilles de style)
• XML (pour transmettre les données)
• DOM (pour parser le XML)
• JavaScript (pour effectuer les traitements)

AJAX va permettre de modifier une page sans la recharger entièrement, ce qui va grandement accélérer les applications et les rendre plus réactives aux actions des utilisateurs. En fait, pour faire de l'ajax, il faut utiliser l'objet XMLHttpRequest. C'est cet objet qui va permettre de communiquer avec les scripts situés sur les serveurs.

Fonctionnement

Pour commencer, il nous faut un objet XMLHttpRequest. Là, deux cas de figure sont à prendre en compte :

• le navigateur est Internet Explorer : dans ce cas on utilise un objet ActiveX
• le navigateur n'est pas Internet Explorer (par exemple Firefox, Safari, ...) : dans ce cas on utilise l'objet XMLHttpRequest qui reprend en fait les propriétés et les méthodes de l'objet ActiveX de Microsoft.

Pour créer notre objet XMLHttpRequest, on peut procéder comme ceci:

 if (window.XMLHttpRequest) { 
     // on est dans le cas où le navigateur n'est pas Internet Explorer
     httpRequest = new XMLHttpRequest();
 }
 else if (window.ActiveXObject) {
     // on est dans le cas ou le navigateur est Internet Explorer
     try{
         httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

Il est à noter que bien que l'on utilise ActiveX, il n'y aura pas de déclenchement de message de sécurité.

Il faut ensuite s'assurer que tous les navigateurs fonctionneront correctement même sans entête XML (notamment pour Mozilla). Pour ce faire, on peut utiliser le code suivant :

 httpRequest.overrideMimeType('text/xml');

L'étape suivant consiste à spécifier à l'objet httpRequest la fonction javascript qu'il faudra appeler pour effectuer le traitement des réponses du serveur. Ceci peut être fait de deux manières différentes :

 httpRequest.onreadystatechange = nomDeLaFonction;

ou

 httpRequest.onreadystatechange = function(/*ne pas mettre d'arguments*/) {
     // traitements de la réponse
 };

Il s'agit ensuite de communiquer avec le serveur, c'est à dire appeler un script ou une page et éventuellement lui communiquer des informations. Pour appeler un script ou une page, on utilise la méthode open de l'objet httpRequest. Cette méthode prend trois paramètres en argument :

• la méthode de requête HTTP. Par exemple GET, POST, HEAD, ...
• l'URL de la page ou du script
• un booleen spécifiant si la requête est asynchrone. Si True alors l'execution de la fonction javascript se poursuivra en attendant la réponse du serveur.

Pour transmettre des données au serveur, il faut utiliser la méthode send de l'objet httpRequest. Cette méthode prend null en argument s'il n'y a pas de données à transmettre ou alors une chaîne de requête de la forme nomParam1=valeur1&nomParam2=valeur2&nomParam3=valeur3&......&nomParamN=valeurN. Il est à noter qu'il est préférable de changer le type mime de la requête pour que les données envoyées soient prises en compte. Ceci peut être fait juste avant d'appeler la méthode send, de la manière suivante :

 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Pour communiquer avec le serveur, on peut avoir par exemple :

 httpRequest.open('GET', 'http://www.monSite.org/monScript', true);
 httpRequest.send(null);

Voyons maintenant plus en détails la façon de réaliser la fonction de traitement des données du serveur. Cette fonction doit dans un premier temps attendre d'avoir reçu toutes les données, ensuite vérifier que le serveur n'a pas renvoyer un message d'erreur et seulement après traiter les données.

• Vérifier qu'on a reçu toutes les données : pour ce faire, on utilise la proprité readyState de l'objet httpRequest. Cette propriété est un code indiquant l'état de la réponse du serveur :
  • 0 : non initialisée
  • 1 : en cours de chargement
  • 2 : chargée
  • 3 : en cours d'interaction
  • 4 : terminée

On a par exemple :

if (httpRequest.readyState == 4) {
   // la réponse a été reçue entièrement
} else {
   // on est pas encore prêt à traiter la réponse
}

• S'assurer que le serveur n'a pas retourner un message d'erreur : pour ce faire, on utilise la propriété status de l'objet httpRequest. Cette propriété est un code indiquant l'état de la réponse HTTP du serveur. (Codes d'état des réponses HTTP)

On a par exemple :

if (httpRequest.status == 200) {
    // il n'y a pas d'erreur : on peut effectuer les traitements
} else {
    // il y a eu un problème avec la requête,
    // par exemple la réponse peut être un code 404 (Non trouvée) 
    // ou 500 (Erreur interne au serveur)
}

• Traiter les donner. Il y a deux façons de récupérer les données renvoyées par le serveur :
  • utiliser la propriété responseText de l'objet httpRequest (la réponse sera alors sous la forme d'une chaîne de texte)
  • utiliser la propriété responseXML de l'objet httpRequest (la réponse sera alors sous la forme d'un objet XMLDocument qui pourra être parser à l'aide des fonctions DOM de javascript)

Par exemple pour afficher la réponse du serveur dans un popup :

alert(httpRequest.responseText);

ou

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0); 
alert(root_node.firstChild.data);

Tutoriels

• Premiers pas en AJAX
• Techniques AJAX alternatives
• Un tutoriel
• Un tutoriel très interessant
• Tutoriel sur la modification inline de données avec AJAX
• Tutoriel sur l'utilisation de la librairie prototype.js

Les FrameWorks

Devant l'essor grandissant d'AJAX, beaucoup de framworks et de toolkits ont vu le jour. Parmi les frameworks PHP, on a :

• XAJAX : librairie PHP orientée objet.
• SAJAX : permet de programmer facilement des sites avec AJAX.
• SAJA : permet de réaliser de façon rapide et facile des applications sécurisées avec AJAX.
• AJASON : librairies PHP et JavaScript.
• CAKE : framework PHP.
• Feather AJAX : librairie AJAX facile à utiliser et rapide.
• JPSPAN : librairie AJAX.
• CAJAX : librairie PHP pour créer des interfaces utilisant AJAX .
• Simplejax : permet de créer facilement des application flexible avec AJAX.
• Dutchpipe : permet de construire un environnement multi-utilisateurs (utlilise PHP/AJAX).
• My-Bic : framework PHP/AJAX robuste et facile.
• AJAX Core : framework PHP permettant de développer des applications AJAX facilement.
• Tigermouse : Framework PHP/AJAX.
• Protojax : framework AJAX orienté objet permettant de développer des applications web.