Importation et traitement d'un fichier XML par DOM

d'abord le script en action

  1. le document XML source
  2. le tableau généré grâce au script
  3. effacer le tableau généré

Création et destruction d'une table en DOM

Les fichiers javascript sont responsable du traitement du fichier XML et de sa publication en un tableau XHTML.
Pour créer et/ou effacer un tableau avec DOM veuillez vous rapporter à mon tutorial. La partie, nouvelle et la plus importante des fichiers javascript est celle qui corresponds aux fonctions d'import du XML.

La solution XMLHttpRequest()

Cette méthode est de plus en plus répandue car elle est implémentée par tous les navigateurs récents, de Firefox à Opera en passant par IE et Safari. Elle se base sur une propriété qui au départ n'existée que chez IE est qui maintenant se voit être adoptée et être normaliser par le W3C.

Voici comment effectuer une requète pour un fichier XML à partir d'une page statique ;).

// definition des variables globales http_request et xmlDoc
var http_request = false;
var xmlDoc;
function makeRequest(url) {
   http_request = false;
   // on instansifie un nouvel objet http_request
   // pour Mozilla, Safari, Opera
   if (window.XMLHttpRequest) http_request = new XMLHttpRequest();
   // pour IE
   else if (window.ActiveXObject) http_request = new ActiveXObject("Microsoft.XMLHTTP");
   if (!http_request) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
   }
   // en fonction de l'etat de la requete on appelle la fonction takeActions
   http_request.onreadystatechange = takeActions;
   // on appelle la page url en methode GET... 
   // la valeur true permet la non synchronisation... 
   // le script peu continuer en attendant le chargement de la page
   http_request.open('GET', url, true);
   http_request.send(null);
}

function takeActions() {
   // readyState = 4 -> la page XML a été totalement chargée
   if (http_request.readyState == 4) {
      // le statut 200 -> la page est correctement téléchargée  
      if (http_request.status == 200) {  
         // on charge la page dans xmlDoc
         xmlDoc = http_request.responseXML;
         // et on appelle createTable();
         createTable();
      }
      else alert('There was a problem with the request.');
   }
}

Au fait au cas où vous ne l'auriez pas encore compris... cette méthode est la base du 'nouveau truc' à la mode : l'Ajax