logo oujood
🔍

AJAX et XML : Lire et afficher un fichier XML dynamiquement avec XMLHttpRequest

Maîtrisez la communication asynchrone entre JavaScript et un fichier XML grâce à AJAX : requête GET, parsing XML, traversée du DOM XML et injection HTML dynamique.

OUJOOD.COM

Comment extraire et afficher des données d'un fichier XML avec AJAX en JavaScript

AJAX (Asynchronous JavaScript and XML) permet à une page web de communiquer avec un serveur et de charger des données XML en arrière-plan, sans rechargement de la page. Cette technique est fondamentale pour créer des interfaces web réactives et dynamiques. En utilisant l'objet XMLHttpRequest, JavaScript peut envoyer une requête HTTP asynchrone vers un fichier XML hébergé sur le serveur, récupérer les données structurées, puis les parser et les injecter dans le DOM de la page sous forme de tableau HTML lisible. Cette approche est encore largement utilisée en 2026 pour intégrer des flux de données XML provenant de services tiers, d'API legacy ou de catalogues structurés.

Objectif de cet exemple AJAX + XML :

L'exemple ci-dessous illustre comment une page HTML peut, au clic d'un bouton, déclencher une requête AJAX vers un fichier cd_catalog.xml contenant un catalogue de CD musicaux, puis afficher dynamiquement les données (titre, artiste, prix) dans un tableau HTML généré à la volée. Aucun rechargement de page n'est nécessaire : c'est la force du modèle asynchrone AJAX.

Explication détaillée de la fonction loadXMLDoc()

Lorsqu'un utilisateur clique sur le bouton «Informations sur CD», la fonction loadXMLDoc() est appelée avec l'URL du fichier XML en paramètre. Cette fonction réalise les étapes suivantes :

  1. Création de l'objet XMLHttpRequest : compatible avec tous les navigateurs modernes (et IE via ActiveXObject pour les versions legacy).
  2. Définition du gestionnaire onreadystatechange : une fonction anonyme est assignée à cet événement ; elle est déclenchée à chaque changement d'état de la requête HTTP.
  3. Vérification de readyState == 4 et status == 200 : ces deux conditions garantissent que la réponse est complète et que le serveur a répondu avec succès.
  4. Parsing du XML via responseXML : le navigateur parse automatiquement le XML reçu en un objet DOM, permettant d'utiliser getElementsByTagName() pour traverser les nœuds.
  5. Construction dynamique d'un tableau HTML : les données extraites sont concaténées dans une chaîne HTML puis injectées dans le div cible via innerHTML.

Le bloc try/catch autour de chaque extraction de valeur protège contre les nœuds manquants ou vides dans le fichier XML, rendant le code robuste face aux données incomplètes.

Exemple — Fonction principale loadXMLDoc() (version simplifiée commentée) :

   📋 Copier le code 

function loadXMLDoc(url)
{
  var xmlhttp; // Déclaration de l'objet de requête AJAX
  var texte, tab, YY, i;
  // Création de l'objet XMLHttpRequest selon le navigateur
  if (window.XMLHttpRequest)
  {
    xmlhttp = new XMLHttpRequest(); // Navigateurs modernes (Chrome, Firefox, Edge, Safari)
  }
  else
  {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Compatibilité IE6/IE5 (legacy)
  }
  // Gestionnaire déclenché à chaque changement d'état de la requête
  xmlhttp.onreadystatechange = function()
  {
    // readyState 4 = réponse complète | status 200 = succès HTTP
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      // Début de la construction du tableau HTML avec en-têtes
      texte = "<table border='1'><tr><th>Titre</th><th>Artiste</th></tr>";
      // responseXML retourne un objet DOM XML parsé automatiquement
      // On sélectionne tous les éléments <CD> du document XML
      tab = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
      for (i = 0; i < tab.length; i++)
      {
        texte = texte + "<tr>";
        // Extraction du premier nœud <TITRE> dans chaque <CD>
        YY = tab[i].getElementsByTagName("TITRE");
        try
        {
          texte = texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
        }
        catch (er)
        {
          texte = texte + "<td> </td>"; // Cellule vide si nœud manquant
        }
        // Extraction du premier nœud <ARTISTE> dans chaque <CD>
        YY = tab[i].getElementsByTagName("ARTISTE");
        try
        {
          texte = texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
        }
        catch (er)
        {
          texte = texte + "<td> </td>";
        }
        texte = texte + "</tr>";
      }
      texte = texte + "</table>";
      // Injection du tableau HTML dans le conteneur cible de la page
      document.getElementById('txtCDInfo').innerHTML = texte;
    }
  };
  // Envoi de la requête GET asynchrone vers le fichier XML
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

La page HTML complète avec AJAX et lecture XML

Voici le code source HTML complet intégrant la fonction loadXMLDoc(), un bouton déclencheur et un conteneur d'affichage. La colonne Prix est également extraite depuis le nœud <PRIX> du XML, illustrant la récupération de plusieurs champs simultanément depuis un même enregistrement XML.

Notez que la structure <div id="txtCDInfo"> joue le rôle de zone d'affichage dynamique : son contenu (le bouton initialement) est remplacé par le tableau généré dès réception de la réponse XML du serveur.

   📋 Copier le code 

<html>
<head>
<script>
function loadXMLDoc(url)
{
  var xmlhttp; // Objet de requête HTTP asynchrone
  var texte, tab, YY, i;
  // Détection du support XMLHttpRequest (standard W3C)
  if (window.XMLHttpRequest)
  {
    xmlhttp = new XMLHttpRequest();
  }
  else
  {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Fallback IE5/IE6
  }
  xmlhttp.onreadystatechange = function()
  {
    // Traitement uniquement quand la réponse est totalement reçue (état 4)
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      // Création de l'en-tête du tableau HTML avec 3 colonnes
      texte = "<table border='1'><tr><th>Titre</th><th>Artiste</th><th>Prix</th></tr>";
      // Récupération de tous les éléments <CD> via le DOM XML parsé
      tab = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
      for (i = 0; i < tab.length; i++)
      {
        texte = texte + "<tr>";
        // Lecture du nœud texte de <TITRE> via firstChild.nodeValue
        YY = tab[i].getElementsByTagName("TITRE");
        try
        {
          texte = texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
        }
        catch (er)
        {
          texte = texte + "<td> </td>";
        }
        // Lecture du nœud texte de <ARTISTE>
        YY = tab[i].getElementsByTagName("ARTISTE");
        try
        {
          texte = texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
        }
        catch (er)
        {
          texte = texte + "<td> </td>";
        }
        // Lecture du nœud texte de <PRIX> : troisième champ extrait du XML
        YY = tab[i].getElementsByTagName("PRIX");
        try
        {
          texte = texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
        }
        catch (er)
        {
          texte = texte + "<td> </td>";
        }
        texte = texte + "</tr>";
      }
      texte = texte + "</table>";
      // Remplacement du contenu du div par le tableau HTML généré
      document.getElementById('txtCDInfo').innerHTML = texte;
    }
  };
  // Ouverture de la requête GET asynchrone (true = non bloquante)
  xmlhttp.open("GET", url, true);
  xmlhttp.send(); // Envoi effectif de la requête vers le serveur
}
</script>
</head>
<body>
<!-- Le div sert à la fois de bouton déclencheur et de zone d'affichage -->
<div id="txtCDInfo">
  <button onclick="loadXMLDoc('cd_catalog.xml')">Informations sur CD</button>
</div>
</body>
</html>

Structure du fichier XML cd_catalog.xml

Le fichier XML utilisé par la requête AJAX est hébergé côté serveur. Il suit une structure hiérarchique standard : un élément racine <CATALOG> contenant plusieurs éléments <CD>, chacun possédant les sous-éléments <TITRE>, <ARTISTE> et <PRIX>. C'est cette structure que getElementsByTagName() parcourt lors du parsing côté client.

   📋 Copier le code 

<?xml version="1.0" encoding="UTF-8"?>
<!-- Fichier XML cd_catalog.xml : catalogue de CD musicaux -->
<CATALOG>
  <CD>
    <TITRE>Empire Burlesque</TITRE> <!-- Titre du disque -->
    <ARTISTE>Bob Dylan</ARTISTE>   <!-- Nom de l'artiste -->
    <PRIX>10.90</PRIX>             <!-- Prix en euros -->
  </CD>
  <CD>
    <TITRE>Hide Your Heart</TITRE>
    <ARTISTE>Bonnie Tyler</ARTISTE>
    <PRIX>9.90</PRIX>
  </CD>
  <!-- Ajoutez d'autres éléments <CD> selon la même structure -->
</CATALOG>

Vous pouvez consulter le fichier XML utilisé dans cet exemple : cd_catalog.xml.

Version modernisée avec fetch() API (2026)

En 2026, l'API Fetch est la méthode recommandée pour les requêtes HTTP asynchrones en JavaScript natif. Elle offre une syntaxe plus lisible basée sur les Promises et est supportée nativement par tous les navigateurs modernes. Voici comment réécrire le même exemple AJAX XML avec fetch() :

   📋 Copier le code 

// Version moderne avec l'API Fetch et le parsing XML DOMParser (2026)
function loadXMLDocModern(url)
{
  // fetch() retourne une Promise résolue avec la réponse HTTP
  fetch(url)
    .then(function(response) {
      // Vérification du statut HTTP avant de traiter
      if (!response.ok) {
        throw new Error("Erreur HTTP : " + response.status);
      }
      return response.text(); // Récupération du contenu brut en texte
    })
    .then(function(xmlText) {
      // DOMParser convertit la chaîne XML en objet DOM manipulable
      var parser = new DOMParser();
      var xmlDoc = parser.parseFromString(xmlText, "text/xml");
      // Sélection de tous les éléments <CD> dans le document XML parsé
      var tab = xmlDoc.getElementsByTagName("CD");
      var texte = "<table border='1'><tr><th>Titre</th><th>Artiste</th><th>Prix</th></tr>";
      for (var i = 0; i < tab.length; i++) {
        texte += "<tr>";
        // Extraction sécurisée avec opérateur optionnel (?.) modern JS
        var titre = tab[i].getElementsByTagName("TITRE")[0]?.textContent || "";
        var artiste = tab[i].getElementsByTagName("ARTISTE")[0]?.textContent || "";
        var prix = tab[i].getElementsByTagName("PRIX")[0]?.textContent || "";
        texte += "<td>" + titre + "</td><td>" + artiste + "</td><td>" + prix + "</td>";
        texte += "</tr>";
      }
      texte += "</table>";
      document.getElementById('txtCDInfo').innerHTML = texte;
    })
    .catch(function(error) {
      console.error("Erreur lors du chargement XML :", error);
    });
}
Cours précédent :   Base de données AJAX     Sommaire de :
Le langage JavaScript

Par carabde | Mis à jour le 13 mars 2026 (original : 22 août 2014)