Formation interne AJAX

Exemple de requête simple

On dispose d’un fichier texte (lorem.txt) dont on veut faire afficher le contenu dans une balise <div> de notre page :
Ce fichier texte est situé dans un sous-dossier « serveurs »
La balise de destination (qui peut contenir un texte d’attente) s’appelle « here »
Voici le code javascript qui convient :
1. function lorem(){
2. var xhrLorem = getXhr();
3. xhrLorem.onreadystatechange = function(){
4. if(xhrLorem.readyState == 4 && xhrLorem.status == 200){
5. document.getElementById(« here »).innerHTML = xhrLorem.responseText;
6. }
7. }
8. xhrLorem.open(« GET », »serveurs/lorem.txt »,true);
9. xhrLorem.send(null);}
Ce code sera exécuté lorsque l’événement onclick sera intercepté sur un bouton…

<button onclick= »lorem(); »>….

mode synchrone et asynchrone

Par défaut, les requêtes AJAX sont prévues pour fonctionner en mode asynchrone : pendant que le serveur exécute la requête et jusqu’à ce que la réponse soit complète, le navigateur continue son interprétation de la page et le javascript est actif.
La page n’ayant pas à se recharger, l’aspect dynamique se fait sans blocage de l’utilisateur.
Dans certains cas cependant, ceci peut présenter des inconvénients : par exemple si la réponse crée des éléments sur la page, ceux-ci ne seront pas accessible tant que la requête précédente ne sera pas terminée et traitée. Dans ces circonstances, il faudra faire appel à une requête synchrone : le navigateur reste en suspens jusqu’à la fin du traitement de la requête courante.
Il existe assez souvent des moyens de contourner cette difficulté, comme nous le verrons plus loin : une requête doit ramener les noms des villes commençant par les caractères saisis par l’utilisateur.
La table des villes comporte près de 35000 entrées, il est évident que le temps de traitement risque d’être long ! Dans ce cas, on peut limiter le nombre de réponses à fournir par le serveur (nous avons choisi de ne ramener que les 10 premiers noms correspondant au critère de sélection). Le temps de traitement est alors notablement plus court et redevient compatible avec une requête asynchrone.