Ajax, c'est un héros de Troie, un détergent liquide, mais aussi et surtout une technique de développement pour sites web.

Lorsque vous créez une page en HTML, c'est une page statique, elle ne change jamais. Avec PHP vous avez découvert que vous pouviez générer dynamiquement le code html et ainsi la modifier en fonction de paramètres renvoyés par l'utilisateur. Mais une fois la page HTML générée et envoyée à l'utilisateur, on se retrouve au même point. A chaque action de l'utilisateur, il faut ouvrir une url, interroger le serveur et recharger la page modifiée.

C'est ici qu'Ajax intervient. AJAX (Asynchronous Javascript And XML), n'est en réalité qu'un peu de code Javascript qui vous permet d'interroger le serveur et de recevoir une réponse directement depuis votre page HTML, sans avoir à la recharger ! Il ne vous reste alors qu'à traiter les données reçues en JS pour proposer des listes déroulantes liées, des questions conditionnelles, afficher un nouveau bloc dans la page, enregistrer rapidement des données, ou tout ce qui peut vous passer par la tête

Voyons un peu plus en détail comment tout cela fonctionne.

La classe JavaScript XMLHttpRequest permet d'interagir avec le serveur grâce à ses méthodes et ses attributs. La première chose à faire est donc de l'instancier, sachant que cela ne se fait pas de la même façon entre IE et FF :

if (window.XMLHttpRequest) { //  On test si l'objet existe
  xhr = new XMLHttpRequest(); //  Firefox, Safari, ...
} 
else if (window.ActiveXObject) { //  Version ActiveX
  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
}

Maintenant que nous avons instancié notre objet, regardons comment faire pour envoyer des données au serveur. Il faut pour cela utiliser quelques unes des méthodes de l'objet XMLHttpRequest :

- open() : cette méthode permet de spécifier si les données sont envoyées via la méthode GET ou POST, à quelle URL elles doivent être envoyées, et si le traitement sera asynchrone (le script poursuit son exécution, sans bloquer le navigateur) ou pas (le script reste bloqué en attendant la réponse du serveur).
- send() : lorsque l'on utilise la méthode POST, il faut spécifier quelles sont les paramètres à envoyer au serveur. Il faut pour cela constituer une chaine de la forme "param1=valeur1&param2=valeur2&..." et la passer dans la fonction send(). Avec la méthode GET, les paramètres sont spécifiées dans l'url (comme d'habitude : url?param1=valeur1&param2=valeur2&...) on envoi donc la valeur null.

xhr.open('GET', 'http://www.phpfrance.com/script.php?param=valeur', true);
xhr.send(null);

- setRequestHeader() : cette méthode permet de spécifier un entête HTTP (par exemenple un charset). Pour envoyer des données en post, il est nécessaire de spécifier le Content-Type avant d'envoyer les données :

xhr.open('POST', 'http://www.phpfrance.com/script.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xhr.send('param=valeur');

Si nécessaire, d'autres méthodes permettent de spécifier la durée maximale (timeout) accordée à une requête pour qu'elle s'exécute complètement (setTimeouts()) ou encore d'interrompre l'exécution d'une requête (abort()).

Enfin, dernière étape, attendre et traiter la réponse du serveur. Les données fournies par le serveur sont récupérées dans les attributs responseXml ou responseText de l'objet XMLHttpRequest. S'il s'agit d'un fichier XML, il sera lisible dans responseXml par les méthodes de Dom.

Pour traiter la réponse du serveur, il faut dans un premier temps attendre la disponibilité des données dont l'état est disponible grâce à l'attribut readyState de XMLHttpRequest. En effet, lors de l'échange avec le serveur, l'attribut readyState va prendre plusieurs valeurs - seule la dernière va vraiment nous être utile :

0 : non initialisé
1 : connexion établie
2 : requête reçue
3 : réponse en cours
4 : terminé

On va donc utiliser la propriété onreadystatechange qui est activée à chaque changement d'état. Pour cela on lui assigne une fonction pour traiter les données et on se focalise sur le cas où la réponse est bien arrivée :

xhr.onreadystatechange = function() { // traitement  de la réponse 
  if (xhr.readyState == 4) { // la réponse a bien été renvoyée

     if (xhr.status == 200) // on vérifie qu'il n'y a pas eu d'erreur
        document.getElementById('monDiv').innerHTML = xhr.responseText; // met à jour le contenu d'un div par ex
     else // si la page n'est pas trouvée (404), les droits sont insuffisants (501), ...
        alert ("Erreur : " + xhr.status);
  }
}

Et voilà, votre page HTML peut désormais communiquer avec le serveur sans nécessiter de rechargement. Vous pouvez ainsi vérifier si un login existe et en informer immédiatement l'utilisateur, ajuster le contenu d'une liste déroulante en fonction d'un paramètre spécifié, etc. (Nota : Évitez toutefois de faire tout votre site en Ajax. Il ne pourrait pas être correctement référencé par les moteurs de recherche, et ce que vous gagneriez en esthétisme, vous le perdriez en visiteurs...)

De nombreuses librairies Javascript ont déjà implémenté ces méthodes et vous permettent d'utiliser Ajax de manière beaucoup plus simple, rapide et sécurisée. En voici quelques unes parmi les plus populaires. Elles sont plus ou moins simples à utiliser et proposent plus ou moins de fonctionnalités par défaut, n'hésitez donc pas à les comparer pour trouver celle qui vous convient le mieux
- YUI Connection Manager (Yahoo!)
- Prototype
- JQuery
- script.aculo.us
- Moo.fx
- ...

À découvrir également pour les plus confirmés, cette classe à la fois complète et plutôt simple d'utilisation

Les mêmes exemples via YUI

Pour charger les composants nécessaires dans votre page, soit vous téléchargez Yahoo! UI puis vous réuploadez les fichiers sur votre serveur, soit vous profitez de la générosité de Yahoo! qui mes ses serveurs à votre disposition (méthode recommandée). Pour inclure les composants à votre page HTML : YUI ne supporte que les requêtes asynchrones, donc il vous faudra créer un objet pour le "callback", c'est à dire les méthodes qui seront appelée automatiquement en cas de succès/échec : Ensuite il suffit de lancer la requête GET ou POST et YUI appelera vos méthodes le moment voulu. Vous pouvez passer les valeurs POST en utilisant le quatrième argument de la méthode : Il y a bien sûr bien d'autres options dans ce composant, si vous voulez en savoir plus allez voir les exemples sur http://developer.yahoo.com/yui/connection/