GeckoGeek.fr

Paradigme d'un lézard

Jeudi 07 Décembre 2017

XLST et XML en Javascript avec Ajaxslt ou jQuery

Par Vinz le 29/10/2009 dans Programmation | 0 commentaire

Il arrive que vous ayez envie de mettre en forme des données XML avec une feuille XSLT sur Internet. Vous pouvez effectuer cette tâche par du PHP, Java, … tout un tas de langages serveur. Mais il pourrait arriver que vous décidiez de laisser faire le navigateur du client pour diverses raisons. Chaque navigateur a ses fonctions pour parser en DOM. Et même si cela ne vous prendra pas plus d’une dizaine de lignes pour y arriver pour chaque navigateur, vous avez peut-être envie de vous simplifier la vie en passant par une librairie, non ? Si c’est le cas lisez ce topic :-]
Ajaxslt / jQuery

La librairie Ajaxslt

Cette librairie Ajax développée en “New BSD License” est une implémentation de XSLT en Javascript. Sa prise en main est assez rapide et ne dépend pas d’autres librairies.

Exemple d’un cas pour XML/XSLT simple

Avant de faire marcher votre exemple vous devez intégrer quelques .js. Voici la liste des fichiers à inclure dans votre projet :





Une fois ces fichiers rajoutés dans votre projet il vous suffit d’appeler les quelques lignes suivantes. Nous mettrons dans l’élément “output” le résultat du mix entre le xml et le xslt.

// Parsing de vos codes xml & xslt
var xml = xmlParse(XML_CODE);
var xslt = xmlParse(el(XSLT_CODE);
// On procède !
var html = xsltProcess(xml, xslt);
// On insère le résultat dans la div
document.getElementById("output").innerHTML = html;

Notons que :
XML_CODE et XSLT_CODE sont des variables qui doivent contenir le contenu respectif de votre XML et de votre XSLT.
– Il est conseillé de n’exécuter ces lignes qu’une fois votre page entièrement chargée.
– S’il y a une erreur dans vos codes il y a peu de chance pour qu’elle vous éclate à l’écran (donc commencez par des tests simples)

Se procurer les sources

Le projet, disponible dans un google code, est encore aujourd’hui mit à jour de temps à autre (la dernière modification date de Juillet 2009) : http://code.google.com/p/ajaxslt/

Utiliser l’extension jQuery

Le projet Ajaxslt comporte de nombreux fichiers à inclure selon ce que vous souhaitez faire. Si vous souhaitez avoir du “tout en un” (mais avec le poids du fichier qui va avec), vous pouvez passer par une extension de jQuery qui wrap Ajaxslt.

Exemple d’un cas pour XML/XSLT simple

Imaginons que vous souhaitiez afficher le résultat du mix xml/xslt dans une div nommée output :

Il vous faudra simplement ajouter dans votre fichier Javascript la ligne suivante :

$('#output').xslt({xmlUrl: 'monFichier.xml', xslUrl: 'monFichier.xsl'});

Comme tout à l’heure il est préférable d’attendre que votre page soit entièrement chargée. En jQuery cela se fait assez simplement :

$(document).ready(function () {
  // Code à executer
});

Se procurer les sources

Le projet et une (rapide) documentation se trouvent à l’adresse suivante : http://www.jongma.org/webtools/jquery/xslt/.

Pour aller plus loin

– Nous reviendrons bientôt sur un petit billet pour apprendre à indiquer des variables à XSLT via Javascript. Chose très utile et hélas très peu documentée :-[
– Il est possible d’utiliser la plupart des langages serveur pour effectuer la même chose. Si vous n’êtes pas sûr de ce que vous recrache ces librairies, vous pouvez utiliser un petit script PHP (par exemple) pour vérifier.


Laisser un commentaire