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¶m2=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¶m2=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
