XSLT sur le client

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

Solution JavaScript

Dans le chapitre précédent, 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 les fichiers XML (par exemple, cette méthode ne fonctionne pas si le navigateur ne reconnaît pas XSLT).

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

En utilisant JavaScript, nous pouvons :

  • Effectuer des tests de confirmation du navigateur
  • Utiliser 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 permettre 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 côté client deviendra 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 présenté dans le chapitre précédent :

<?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>

Consulter ce fichier XML.

ainsi que les feuilles de style XSL associées :

<?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">Title</th> 
        <th align="left">Artist</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 au fichier XSL.

Points importants :Cette phrase signifie que le fichier XML peut être transformé en XHTML en utilisant plusieurs feuilles de style XSL différentes.

Convertir XML en XHTML dans le navigateur

Voici 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")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Astuce :Si vous ne savez pas comment écrire en JavaScript, apprenez notreTutoriel JavaScript》。

Le premier segment de code crée une instance du parseur XML de Microsoft, puis charge le fichier XML dans la mémoire. Le deuxième segment de code crée une autre instance du parseur, puis charge ce fichier XSL dans la 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 !

Voyez comment cela fonctionne dans IE.