Accueil    XML XSL    XML - Transformation XSL
 



  XML - Transformation XSL



Utiliser une feuille de style XSL est une alternative interressante pour manipuler et présenter les données issues de fichiers XML :
   - Toute les possibilités de présentation avec HTML
   - Toutes les fonctionnalités du XSL (Tri, conditions, boucles ...)
   - Le dynamisme grâce à la possibilité d'employer du javascript

Pour afficher l'association d'un document XML avec une feuille de style XSL (Transformation XSL ou XSLT), plusieurs méthodes existent :


La première est de spécifier dans le fichier XML la feuille de style qui lui sera appliquée, juste après la déclaration (en seconde ligne). En ouvrant le fichier XML, la transformation se fera automatiquement :


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="MonFichierXSL.xsl"?>
<noeud_racine>
   contenu du document XML
</noeud_racine>


La seconde est d'utiliser le javascript pour effectuer la transformation et afficher le résultat dans un élément html (dans une div par exemple).
Pour celà il faut distinguer les différents moyens de faire ce traitement :
   - par ActiveX, limité à Internet Explorer (solution pour IE 6 et moins).
   - par XMLHttpRequest, supporté par tous les navigateurs y compris Internet Explorer 7 et plus

Visualiser l'exemple complet


<script type="text/javascript">

// Chargement des fichiers XML et XSL pour les navigateurs Firefox Chrome Opera ...
function loadXML(xmlPath)
{
   var xmlhttp = new window.XMLHttpRequest();
   xmlhttp.open("GET", xmlPath, false);
   xmlhttp.send(null);
   var xmlDoc = xmlhttp.responseXML.documentElement;
   return xmlDoc;
}

// Generation du rendu
function postHTML(xmlPath, xslPath, elementId)
{
   if (document.implementation && document.implementation.createDocument)
   {
      // script pour tous les navigateurs Firefox Opera ...
      var xslDocument = loadXML(xslPath);
      var xmlDocument = loadXML(xmlPath);

      var xsltProcessor=new XSLTProcessor();
      xsltProcessor.importStylesheet(xslDocument);
      var htmlCode = xsltProcessor.transformToFragment(xmlDocument,document);
      document.getElementById(DivId).appendChild(htmlCode);
   }
   else
   {
      if (window.ActiveXObject)
      {
         // script pour IE
         // Chargement XML
         var xml = new ActiveXObject("Microsoft.XMLDOM")
         xml.async = false
         xml.load(xmlPath)
         // Chargement XSL
         var xsl = new ActiveXObject("Microsoft.XMLDOM")
         xsl.async = false
         xsl.load(xslPath)
         // Transformation
         document.getElementById(DivId).innerHTML = xml.transformNode(xsl);
      }
      else
      {
         document.getElementById(DivId).innerHTML = "Xslt non supporté";
      }
   }
}

</script>

Il faut placer dans le document html un élément qui contiendra le rendu et appeler la fonction "postHTML" dans l'évènement onload du body (en supposant ici que les fichiers se nomment exemple.xml et exemple.xsl) :

<body onload="postHTML('exemple.xml', 'exemple.xsl', 'exemple');">
...
<div id="exemple"></div>
...
</body>