XSLT - Client

Si votre navigateur prend en charge XSLT, il peut être utilisé dans le navigateur pour convertir le document en XHTML.

Solution JavaScript

Dans les chapitres précédents, nous vous avons expliqué comment utiliser XSLT pour convertir un document XML en XHTML. Nous avons accompli cela en ajoutant une feuille de style XSL au fichier XML et en effectuant la conversion via le navigateur.

Même si cette méthode fonctionne bien, il n'est pas toujours satisfaisant d'inclure des références à des feuilles de style dans des fichiers XML (par exemple, cette méthode ne fonctionne pas si le navigateur ne reconnaît pas XSLT).

Une méthode plus générique consiste à utiliser JavaScript pour effectuer la conversion.

En utilisant JavaScript, nous pouvons :

  • Effectuez des tests de confirmation du navigateur
  • Utilisez différentes feuilles de style en fonction du navigateur et des besoins de l'utilisateur

Voici l'attrait de XSLT ! Un des objectifs de conception de XSLT est de rendre possible la conversion d'un format à un autre, tout en supportant différents types de navigateurs et les besoins différents des utilisateurs.

La transformation XSLT sur le côté client deviendra certainement l'une des principales tâches exécutées par les navigateurs futurs, et nous verrons également son expansion dans des marchés spécifiques de navigateurs (braille, imprimantes réseau, appareils auditifs, etc.).

Fichiers XML et fichiers XSL

Voyez ce document XML déjà présenté dans les chapitres précédents :

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
.
</catalog>

Voir ce fichier XML.

ainsi que les tableaux de styles XSL associés :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>Ma collection de CD</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Titre</th> 
        <th align="left">Artiste</th> 
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title" /></td>
        <td><xsl:value-of select="artist" /></td>
      </tr>
      </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Voir ce fichier XSL.

Veuillez noter que ce fichier XML ne contient pas de référence aux fichiers XSL.

Points importants :Cette phrase signifie que le fichier XML peut être converti en utilisant plusieurs styles de table XSL différents.

Convertir XML en XHTML dans le navigateur

Ceci est le code source utilisé pour convertir un fichier XML en XHTML sur le client :

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transformation
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Astuce :Si vous ne savez pas comment écrire en JavaScript, apprenez notre «Tutoriels JavaScript>

Le premier morceau de code crée une instance du parseur XML de Microsoft, puis charge le fichier XML en mémoire. Le deuxième morceau de code crée une autre instance du parseur, puis charge ce fichier XSL en mémoire. La dernière ligne de code utilise le document XSL pour transformer le document XML, et affiche le résultat en XHTML dans le navigateur. La tâche est terminée !

Voyons comment cela fonctionne dans IE.