TUTORIELS 

Affichage d'un document XML dans une page Web
Par Loïc Boileau - Ingénieur Microsoft France

Trois techniques différentes d'affichage d'un document XML au sein d'une page Web : le Data Binding HTML, le DOM et enfin XSLT.  (6 mars 2002)
 

Page: 1 | 2 | 3 | 4 | 5

Utilisation du DOM

Le DOM (Document Object Model) est une API de manipulation représentant le document XML sous la forme d'une arborescence d'objets.

Dans l'exemple qui suit, le document XML est manipulé par le biais du DOM afin de construire une table identique à celle générée dans l'exemple précédent.

L'objet permettant de charger un document XML est instanciable par le biais du ProgID MSXML.DOMDocument.

En JScript :

DocXML = new ActiveXObject("Microsoft.XMLDOM");

En VBScript :

Set DocXML = CreateObject("Microsoft.XMLDOM")

La méthode Load effectue le chargement des données. La propriété async est positionnée à false pour indiquer que le chargement se fait de manière synchrone (les traitements suivants ne seront exécutés qu'une fois le chargement effectué).

DocXML.async = "false";
DocXML.load("Liste.xml");

Cette méthode load renvoie un booléen spécifiant si l'opération de chargement a réussi. Si tel n'est pas le cas, l'objet parseError permet d'obtenir des informations sur l'erreur rencontrée.

if (DocXML.load("Liste.xml")){
 // Traitement des données
 } 
 else{
 alert(DocXML.parseError.reason);
 }

Lorsque le document est bien chargé, on peut utiliser les fonctionnalités du DOM pour parcourir les données. L'expression suivante :

Document.documentElement.childNodes.length

retourne le nombre de nœuds fils du document. Ce qui correspond, dans notre exemple, au nombre total de livres dans la liste.

Ensuite, pour atteindre tous les éléments qui constituent un livre, on utilise l'expression suivante:

Document.documentElement.childNodes(i).childNodes(j)

Après avoir parcouru toute la collection de nœuds et construit le code HTML à afficher dans la variable CodeHTML, on utilise la propriété innerHTML pour modifier le contenu de l'élément DIV.

Exemple

<HTML>

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="Style.css">
</LINK> <TITLE>Liste de livres</TITLE> <SCRIPT LANGUAGE="JavaScript"> function AfficheDocXML(){ var Document; Document = new ActiveXObject("Microsoft.XMLDOM"); Document.async = "false"; if(Document.load("Liste.xml")){ HTMLCode = "<TABLE BORDER=0 CELLPADDING=0 >" + "<THEAD><TH>Titre</TH><TH>Auteur</TH>" + "<TH>Pages</TH><TH>Edition</TH><TH>Prix</TH>" + "</THEAD>"; for(i=0;i<Document.documentElement.childNodes.length;i++)
{ HTMLCode += "<TR ALIGN=center >"; for(j=0; j<= 4; j++) HTMLCode += "<TD>" +
Document.documentElement.childNodes(i).childNodes(j).text + "</TD>"; HTMLCode += "</TR>"; } HTMLCode += "<TABLE>"; AfficheDIV.innerHTML = HTMLCode; }else{ alert(Document.parseError.reason); } } </SCRIPT> </HEAD> <BODY onload="AfficheDocXML();"> <H2>Liste des livres</H2> <DIV ID="AfficheDIV"></DIV> </BODY> </HTML>

Avantages

  • Relative simplicité à manipuler la structure d'un document XML (interfaces intuitives).
  • Plus de contrôle sur les opérations que l'on veut effectuer (sélectionner juste la partie des données que l'on souhaite traiter).
  • Modèle objet standard (spécifications du W3C : www.w3.org/DOM).

Page: 1 | 2 | 3 | 4 | 5

 
[ Loïc Boileau, MSDN France pour JDNet
 
Accueil | Haut de page