Lire un fichier XML avec jQuery

Publié dans Javascript | Marqué avec , ,
Share

Ces derniers jours avec mon système de commentaires, je me suis pas mal amusé sur plusieurs points de jQuery, mais une notion me paraissait étrange : la lecture d’un fichier XML. JQuery permet une manipulation simple et poussée du DOM, mais lorsqu’on récupère un fichier XML d’une requête Ajax, on serait incapable de le traiter autrement qu’avec des « bidouilles » Javascript à l’ancienne ?

$.post('ajax.php', function(xml) {
 	var xmlData = xml.getElementsByTagName('com')[0];
 	var ret = xmlData.getElementsByTagName('ret')[0].firstChild.nodeValue;
 	var xmlPseudo = xmlData.getElementsByTagName('pseudo')[0].firstChild.nodeValue;
 	var xmlCommentaire = xmlData.getElementsByTagName('commentaire')[0].firstChild.nodeValue;
}, 'xml');

Franchement, j’y croyais pas. Aujourd’hui j’ai trouvé la solution !

A vrai dire, c’est tout bête, mais j’ai pas encore assez de background jQuery pour y avoir pensé par moi-même. Dans l’exemple ci-dessus, on récupère un fichier XML en sortie de la requête Ajax, et ce fichier XML est symbolisé par la variable xml. Donc $(xml) est à notre fichier XML ce que $(xml) est à notre fichier courant. A partir de là :

  • $(xml).find(‘nomBalise’) nous donne accès à n’importe quel balise du fichier XML
  • $(xml).find(‘nomBalise’).text() nous donne accès au contenu de n’importe quel balise du fichier XML
  • Dans le cas où il existe plusieurs balises possédant le même nom : $(xml).find('nomBalise').each(function() { ...} ) forme une boucle sur les balises. On a alors accès à $(this) pour chercher les sous-balises.

Un petit exemple sur le fichier XML suivant :

<flux>
<ret>1</ret>
<nb>2</nb>
<coms>
    <com>
    <pseudo>BN</pseudo>
    <description>Test 1 - BN</description>
    </com>
    <com>
    <pseudo>Fylhan</pseudo>
    <description>Test 2 - Fylhan</description>
    <com>
</coms>
</flux>

Le script jQuery suivant permet de tester les différents points cités ci-dessus :

$.post('ajax.php', function(xml) {
 // Récupération ret et nb
 console.log('Ret : '+$(xml).find('ret').text());
 console.log('Nb : '+$(xml).find('nb').text());
 // Récupération des com
 $(xml).find('com').each(function() {
   var id = $(this).find('pseudo').attr('id');
   console.log('Pseudo '+(id)+' : '+$(this).find('pseudo').text());
   console.log('Description '+(id)+' : '+$(this).find('description').text());
  });
}, 'xml');

Ce qui affiche dans la console (moi j’utilise Firebug sur Firefox) :

Ret : 1
Nb : 2
Pseudo 1 : BN
Description 1 : Test 1 - BN
Pseudo 2 : Fylhan
Description 2 : Test 2 - Fylhan

Du coup, j’ai plus qu’à modifier mon système de commentaires !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*