Comment enchaîner des requêtes Ajax

Le fonctionnement des scripts Ajax est souvent déconcertant en raison de l'aspect asynchrone qui fait que les actions ne s'effectuent pas en séquence pour suivre l'ordre des instructions, mais qu'elle s'effectuent selon la disponibilité du serveur. Alors que des instructions de requêtes sont lancée, mais que le résultat n'est pas encore obtenu, les instructions suivantes sont exécutées.
Pour éviter cet inconvénient, on utilisera des callbacks, des functions données en paramètres d'autres fonctions. C'est très simple en fait comme nous allons le montrer.

Dans un exemple trivial, nous allons effectuer une commande GET, qui suivra immédiatement une commande POST, et qui dépendra du résultat de celle-ci.

Le commande POST envoie des données à un script PHP qui effectue quelques opérations et place le resultat de ses calculs dans un fichier de texte. La commande GET récupére ce fichier et affiche les résultats. La fonction d'affichage sera appelée là où elle dépendra de la fin de l'exécution de la commande POST.

La commande POST

La requête POST est placée dans la fonction write:

function write(url, data, fun)
{ 
  var xhr = AACreate();
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      if(fun != null) fun();
    }
  }; 
  xhr.open("POST", url, true);		
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(data); 
}

La fonction utilise un callback en paramètre, fun, qui est optionnel. Elle appelle le script donné en "url" avec les paramètres donnés en "data".
Dans le cas présent, la fonction write est appelée avec en paramètre le nom de la fonction "retrieve":

write("demo-chain.php", "file=demo-post.txt&content=" + content, retrieve);

La commande GET

Cette requête GET est faite par la fonction retrieve donnée en paramètre de la fonction précédente, de la sorte elle ne s'exécute qu'après que la requête POST ait été accomplie:

function retrieve(storage)
{
  var xhr = create();
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      var content = xhr.responseText;
      display(content, storage);
    }
  } 
  xhr.open("GET", url , true);
  xhr.send(null); 
}

Cette fonction utilise une autre fonction en callback "display", laquelle affiche simplement le contenu retourné par l'objet XHR dans l'élément donné en paramètre.

function display(content, storage)
{
  storage.innerHTML = content;
}

Télécharger la démo

© 2006-2012 Xul.fr