: javascript

Requêtes serveur

Pour envoyer des requêtes HTTP au serveur, on utilise le plus souvent l'objet XMLHttpRequest bien qu'il existe d'autres alternatives.

Il y a malheureusement une différence entre les navigateurs pour obtenir une instance de l'objet. C'est pourquoi on crée généralement une fonction permettant de l'obtenir et traitant les différences. Voici un exemple d'une telle fonction:

function getXhr() {
  try { return new XMLHttpRequest(); } catch (e) { } // Standard
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { }
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
  return null;
}

Une fois l'instance créée on peut faire des requêtes HTTP pour obtenir des fichiers depuis le serveur. Attention, seules les requêtes adressées au même domaine d'où provient le script sont autorisées (pour des raisons de sécurité).

Lors de l'envoi d'une requête, il faut donner une référence à une fonction qui gèrera la réponse. Cette fonction sera appelée pour les différents états de progression de la requête. A savoir:

0non initialisé
1ouverture. La méthode open() a été appelée avec succès
2envoyé. La méthode send() a été appelée avec succès
3en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé
4terminé. Les données sont chargées

Généralement c'est l'étape 4 qui nous intéresse. C'est à cet instant que l'on peut traiter les données. Pour autant que la réponse soit du type 200 (code HTTP qui signifie que tout c'est bien passé).

Voici un exemple de fonction qui traite la réponse:

function response(xhr) {
  if (xhr.readyState==4) {
    if (xhr.status==200) {
      // Traitement de la réponse
      alert(xhr.responseText);
    }
  }

Cette fonction est en réalité appelée pour chaque étape de la requête. C'est pourquoi il y a un premier if qui test que c'est bien l'étape 4 (terminé). A l'intérieur on test le code HTTP de réponse. Si les deux tests passent, alors on peut traiter les données reçues.

Voici un exemple qui utilise les deux fonctions précédentes pour charger un fichier texte.

var xhr = getXhr();
xhr.onreadystatechange = response; // fonction de traitement
xhr.open("GET", "/fichier.txt", true); // prépare une requête asynchrone
xhr.send(null); // envoie la requête

Plus d'info sur XMLHttpRequest

Editer