Tout le monde a entendu parlé d'AJAX, certains savent un peu ce que c'est, d'autres maitrisent et pour d'autres c'est une nouvelle technologie compliquée.
Que nenni! Ce n'est que du réchauffé: Javascript et XML (pour faire simple).
Pour les Flasheurs, ca correspond à l'objet LoadVars.

Avec AJAX on peut appeller un script côté serveur sans recharger toute la page et c'est par conséquent très rapide.

Pour ne pas réinventer la roue, on va se servir des fonctions existantes et qui marchent.
Je ne saurais que vous conseiller d'aller faire un tour sur le site du W3 Schools et surtout la partie consacrée à AJAX.

Il faut d'abord créer l'objet qui va exécuter la requête HTTP et c'est la fonction GetXmlHttpObject qui va le faire.

Cette fonction marche aussi bien sous Internet Explorer que sous Firefox.
Si le navigateur ne supporte pas les requêtes HTTP, la fonction retourne null.

Pour appeller le script serveur, on utilise la fonction open suivie de la fonction send.
La fonction open(methode, url, asynchrone) prend 3 paramètres:
methode: GET ou POST, similaire à un formulaire classique;
url: adresse du script côté serveur;
asynchrone: si l'appel est synchrone, le navigateur attend que la fonction send recoive une réponse du serveur et est donc "bloqué". Si l'appel est asynchrone, le navigateur est toujours accessible pendant que l'appel est exécuté. Sauf cas particulier on choisira toujours la méthode asynchrone.

La fonction send ne prend qu'un paramètre qui est soit null si aucune variable n'est envoyée, soit une liste de couples variable/valeur séparés par &.

 La technique est d'appeller un script PHP qui va nous renvoyer l'heure en cours et le JavaScript va l'afficher dans une alerte.
Voici le code JavaScript:

Et le code PHP:

 On va reprendre le script d'affichage d'heure et proposer à l'utilisateur de choisir un décalage horaire. Ce décalage sera utilisé dans le script PHP.

La page HTML doit être modifiée pour intégrer un SELECT avec la décalage horaire souhaité.

 Cette possibilité est vraiment puissante et très souple car, en quelque sorte, on contrôle le client depuis le serveur.

Dans l'exemple qui suit on va proposer au visiteur plusieurs actions Javascript à exécuter alors que le code Javascript pour ces actions ne se trouve initialement pas dans la page.

Ainsi le visiteur peut choisir d'afficher une alerte ou d'insérer l'heure dans un DIV:

La seule chose que fait la fonction execAction c'est d'appeller le script exemple3.php qui va se charger de renvoyer le code Javascript nécessaire à l'exécution de l'action.


Le plus important dans la fonction execAction c'est l'appel à la fonction eval qui va interpréter le code contenu dans xmlHttp.responseText.
Notez que le paramètre est directement inséré dans l'appel à la fonction send.

Voyons le code PHP:


Ca marche pas mal mais il y a un problème d'accent dans l'alerte.
Pour y remédier il suffit de spécifier dans l'en-tête PHP qu'on envoit du ISO-8859-1 par exemple.
header('Content-Type: text/html; charset=ISO-8859-1');

Code PHP final:

Voilà je pense qu'on a fait le tour des fonctionnalités de base d'AJAX.
Dans les cas où le script PHP prend du temps, il est bon d'afficher un GIF animé au moment de la requête et une fois qu'on a la réponse on le rend invisible.

Vous pouvez télécharger les ZIPs des exemples pour avoir une base de départ pour vos scripts.