L'événement onreadystatechange en AJAX : Guide Complet pour Gérer les Requêtes Asynchrones

Comprendre l'événement onreadystatechange en AJAX

Avant d'envoyer une requête HTTP asynchrone au serveur, il est essentiel de préparer une fonction de traitement capable de réceptionner et de gérer les données retournées.
Cette fonction spéciale agit comme un gestionnaire d'événements qui capture automatiquement les informations envoyées par le serveur en réponse à votre requête AJAX.
L'objet XMLHttpRequest possède une propriété cruciale nommée onreadystatechange, qui constitue le cœur de la communication asynchrone en AJAX.
La propriété onreadystatechange stocke une référence vers la fonction qui sera automatiquement exécutée pour traiter chaque étape de la réponse du serveur.
Le code suivant illustre comment définir une fonction vide et l'assigner simultanément à la propriété onreadystatechange de votre objet XMLHttpRequest.
Nous enrichirons progressivement cette fonction tout au long de cette leçon, en explorant les différentes propriétés et méthodes de l'objet XMLHttpRequest pour construire des applications AJAX robustes et performantes.

/* Création d'une fonction gestionnaire pour recevoir les données du serveur */
jaxRequest.onreadystatechange = function(){
// Cette fonction sera automatiquement appelée à chaque changement d'état
// Nous implémenterons ici la logique de traitement des réponses
}

La propriété onreadystatechange agit comme un écouteur d'événements qui surveille en permanence l'évolution de la requête. Comme son nom l'indique explicitement :
Cette fonction callback sera automatiquement déclenchée et exécutée chaque fois que la propriété readyState change de valeur, permettant ainsi un suivi précis de la progression de votre requête AJAX.

Lorsqu'une requête HTTP asynchrone est transmise au serveur web, votre application doit être capable de réagir intelligemment aux différentes étapes du cycle de vie de cette requête et d'effectuer des actions spécifiques selon la réponse reçue.

L'objet XMLHttpRequest dispose d'une autre propriété fondamentale appelée readyState, qui stocke l'état actuel de la communication avec le serveur.
À chaque modification de la valeur readyState, le gestionnaire d'événements onreadystatechange est automatiquement invoqué, vous permettant de réagir en temps réel à chaque étape du processus.
L'événement onreadystatechange se déclenche automatiquement à chaque transition d'état du readyState, offrant ainsi un contrôle granulaire sur le traitement de vos requêtes asynchrones.

La propriété readyState détermine précisément à quelle étape du cycle de vie se trouve votre requête XMLHttpRequest, permettant d'adapter votre code en conséquence.

Trois propriétés essentielles de l'objet XMLHttpRequest à maîtriser pour une gestion efficace des requêtes AJAX :

Dans le cadre de ce tutoriel AJAX, nous nous concentrerons principalement sur l'état readyState = 4 (DONE), qui indique que la réponse du serveur est complète et que les données sont prêtes à être récupérées et exploitées. Nous allons donc ajouter une instruction conditionnelle dans notre fonction callback pour vérifier systématiquement si la réponse est totalement chargée avant de la traiter.

/* Fonction gestionnaire pour traiter les données reçues du serveur */
jaxRequest.onreadystatechange = function(){
// Vérification double : réponse complète (readyState==4) ET succès HTTP (status==200)
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// La réponse est complète et valide
// Récupération des données via responseText ou responseXML
// Exécution du traitement métier (affichage, parsing JSON, mise à jour DOM)
}
}

Dans le gestionnaire d'événements onreadystatechange, nous définissons précisément le comportement de notre application lorsque la réponse du serveur web est entièrement reçue et prête à être traitée par notre code JavaScript.

Lorsque la propriété readyState atteint la valeur 4 ET que le code status est égal à 200, cela signifie que la réponse HTTP est complète, valide et exploitable :

Exemple pratique : Affichage de la réponse serveur dans le DOM

Pour les applications AJAX simples et les requêtes de base, vous pouvez facilement récupérer la réponse textuelle du serveur en utilisant la propriété responseText de l'objet XMLHttpRequest. L'exemple suivant démontre comment utiliser du JavaScript vanilla pour injecter dynamiquement le contenu de la propriété responseText dans un élément HTML possédant l'identifiant id="monDiv", permettant ainsi une mise à jour du DOM sans rechargement de page.

Exemple :     📋 Copier le code

// Définition du gestionnaire d'événements pour la requête AJAX
xmlhttp.onreadystatechange=function()
{
// Vérification que la réponse est complète (readyState==4)
// ET que le serveur a renvoyé un code de succès (status==200)
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  // Injection du contenu de la réponse dans l'élément HTML cible
  // responseText contient la réponse sous forme de chaîne de caractères
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

Note importante : L'événement onreadystatechange est déclenché à quatre reprises au minimum lors d'une requête AJAX standard, une fois pour chaque transition de la propriété readyState (de 1 à 4). Il est donc crucial de toujours vérifier à la fois le readyState et le status avant d'exécuter votre logique de traitement.

Utilisation d'une fonction de rappel (Callback Function) pour réutiliser le code AJAX

Une fonction de rappel (ou callback) est une fonction JavaScript passée comme paramètre à une autre fonction, permettant ainsi une exécution différée et une meilleure modularité du code.

Si vous développez plusieurs fonctionnalités AJAX au sein de votre application web, il est fortement recommandé de créer une fonction standard réutilisable pour la création et la configuration de l'objet XMLHttpRequest. Cette fonction peut ensuite être invoquée pour chaque tâche AJAX distincte, évitant ainsi la duplication de code et facilitant la maintenance.

L'appel de cette fonction générique doit obligatoirement contenir au minimum deux paramètres : l'URL de la ressource à requêter et la fonction callback définissant le comportement lors de l'événement onreadystatechange (qui varie généralement selon le contexte d'utilisation de chaque requête AJAX) :

Exemple : Fonction AJAX réutilisable avec callback personnalisé

Exemple :     📋 Copier le code

// Fonction principale qui déclenche une requête AJAX
function myFunction()
{
// Appel de la fonction générique loadXMLDoc avec deux paramètres :
// 1. L'URL du fichier à charger ("ajax_info.txt")
// 2. Une fonction callback anonyme pour traiter la réponse
loadXMLDoc("ajax_info.txt",function()
  {
  // Vérification de l'état de la requête et du code HTTP
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    // Mise à jour dynamique du contenu de l'élément myDiv
    // avec la réponse texte reçue du serveur
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Par carabde | Publié le 22 août 2014 | Mis à jour le 17 novembre 2025