Editions ENI Livres | Vidéos | e-Formations
Exploration de flux XML via DOM
Notion de flux XML
Le format de données XML (eXtensible Markup Language) est omniprésent dans les applications informatiques. XML est un langage de balisage extensible. Ce langage est dit extensible car il permet de créer des déclinaisons ayant leur propre vocabulaire et leur grammaire. À titre d’exemples, XHTML, XSLT, RSS sont des extensions.
XML est essentiellement utilisé pour automatiser des échanges de données entre des systèmes hétérogènes. Il permet de définir des ensembles de données complexes comme des structures arborescentes.
Vous trouverez sur Wikipédia une présentation très complète de XML à l’adresse : http://fr.wikipedia.org/wiki/Extensible_Markup_Language
DOM, le modèle d’accès aux différentes composantes des documents HTML ou encore XML étudié dans le chapitre Modèle DOM va être l’outil principal pour parcourir les fichiers XML.
Dans ce chapitre, nous verrons aussi pour la première fois comment accéder à des fichiers distants via l’objet XMLHttpRequest.
Pour illustrer les possibilités en matière d’exploration de flux XML, de nombreux exemples vont être étudiés. Pour les premiers d’entre eux, un commentaire détaillé sera fourni.
Les différentes techniques...
Exemples
1. Exemple 1 : Affichage d’un contenu d’e-mail codé en XML
L’objectif dans ce premier exemple va être d’afficher en HTML un flux de données XML récupéré sur un site web.
Fichier email.xml
Le document en question (email.xml) a une structure très simple :
<email>
<de>Olivier VIGOUROUX</de>
<a>Christian VIGOUROUX</a>
<entete>Important</entete>
<message>Partie de badminton samedi à 10 heures</message>
</email> Vous l’aurez compris, il peut s’agir d’un message de type e-mail (codé ici en XML) entre un émetteur (Olivier VIGOUROUX) et un destinataire (Christian VIGOUROUX).
Section HTML <body>
Dans le script HTML/JavaScript (nommé DOM_01.htm), le code de gestion du flux XML est intégralement intégré dans la section HTML <body>.
Le script débute par le positionnement dans la page web du message XML. En réalité le message n’apparaît pas à ce niveau, il s’agit uniquement de mettre en place une division HTML (incluant des balises span identifiées).
En général la balise <div> est employée pour contenir et imbriquer d’autres éléments HTML (input, span...) alors que la balise <span> s’emploie plutôt pour encadrer et identifier des mots ou des groupes de mots.
Le code prévu pour l’affichage du contenu de l’e-mail est le suivant :
<!-- Affichage d'un message de type e-mail codé en XML -->
<h3>Affichage d'un message de type mail codé en XML</h3>
<div>
<b>Emetteur : </b> <span id="de"></span><br />
<b>Destinataire : </b> <span id="a"></span><br />
<b>Sujet : </b> <span id="sujet"></span><br />
<b>Message : </b> <span id="message"></span>
</div> Chaque élément span est identifié, ce qui permettra ensuite le renseignement du message par les données effectives lues dans le fichier XML email.xml.
Le script JavaScript placé ensuite dans cette même section HTML <body> est ici listé intégralement (il sera ensuite commenté en détail) :
<!-- Début script JavaScript -->
<script type="text/Javascript">
/*
Création d'un objet XMLHttpRequest pour échanger des données
avec le serveur au format texte, XML ou JSON
NB : Les fichiers XML sont automatiquement parsés par l'objet
et accessibles par les méthodes du DOM
*/
if (window.XMLHttpRequest)
{
// Code spécifique pour les navigateurs
// IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp...
