XML, DOM et AJAX

Traitement d'un fichier XML avec AJAX

L'avantage du XML est la structuration des données et la facilité de traitement de celles-ci. L’inconvénient est le poids du format de balisage qui peut atteindre jusqu'à plus de deux fois le poids des données seules.

Le traitement du XML se fait via l'objet DOM de Javascript et de ses méthodes. Je vous renvoie à la documentation de l'API DOM de Javascript pour en apprendre plus à ce sujet.

Reprenons l'exemple précédent, sauf qu'ici nous appelons un fichier XML contenant une liste de 3 noeuds, et non un fichier PHP.

Nous créons donc une fonction Javascript spécifique dont le rôle est de lire le résultat XML, d'en extraire la valeur du premier noeud, et d'afficher cette valeur dans un élément HTML.

Lorsque l'on doit récupérer une réponse de type XML, l'objet XMLHttpRequest propose une propriété .responseXML permettant de récupérer directement un objet DOM, facilitant ainsi le traitement.

Fichier XML

/*** Fichier XML (file.xml) ***/

<?xml version="1.0" ?>
<data>
<text_1>Hello World!</text_1>
<text_2>Hello Foobar!</text_2>
<text_3>Hello John Doe!</text_3>
</data>

Fichier HTML

/*** HTML ***/

<div id="ajaxBox"></div>

Fichier JAVASCRIPT

/*** Javascript ***/

// Au chargement de la page, déclencher la fonction ajaxBox_update()
window.onload = ajaxBox_update;

// Fonction effectuant la requête AJAX
function ajaxBox_update()
{
// Récupération de l'objet XHR
var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat
xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
ajaxBox_parseXml(xhr.responseXML); // Traitement XML
// Page non trouvée
else
ajaxBox_setText('Error...');
}
};

// Préparation de la requête
var url = 'http://site.com/file.xml';
xhr.open('GET', url, true);

// Execution de la requête
xhr.send(null);
}




// Fonction de traitement des données XML retournées
// Récupère le noeud XML /data/texte_1
function ajaxBox_parseXml(pXml)
{
var dataNode = pXml.getElementsByTagName('data').item(0);
var textNode = dataNode.getElementsByTagName('text_1').item(0);
ajaxBox_setText(textNode.firstChild.data);
}

// Fonction de mise à jour du contenu de la div #ajaxBox
// Ajout d'un element <p> contenant le message, dans le div #ajaxBox
function ajaxBox_setText(pText)
{
var elt = document.getElementById('ajaxBox');
var p = elt.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(pText));
}