XSLT - Sur le client
XSLT peut être utilisé pour transformer le document en XHTML dans votre navigateur.
Une solution JavaScript
Dans les chapitres précédents, nous avons expliqué comment XSLT peut être utilisé pour transformer un document XML en XHTML. Pour ce faire, nous avons ajouté une feuille de style XSL au fichier XML et laissé le navigateur effectuer la transformation.Même si cela fonctionne correctement, il n'est pas toujours souhaitable d'inclure une référence de feuille de style dans un fichier XML (par exemple, cela ne fonctionnera pas dans un navigateur non compatible XSLT.)
Une solution plus polyvalente serait d'utiliser un JavaScript pour effectuer la transformation.
En utilisant un JavaScript, nous pouvons :
- faire des tests spécifiques au navigateur
- utiliser différentes feuilles de style en fonction des besoins du navigateur et de l'utilisateur
C'est la beauté de XSLT ! L'un des objectifs de conception de XSLT était de rendre possible la transformation des données d'un format à un autre, en prenant en charge différents navigateurs et différents besoins des utilisateurs.
Le fichier XML et le fichier XSL
Regardez le document XML que vous avez vu dans les chapitres précédents :
<?xml version="1.0" encoding="UTF-8"?>
<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>
Et la feuille de style XSL qui l'accompagne :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-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>
</xsl:template>
</xsl:stylesheet>
Notez que le fichier XML n'a pas de référence au fichier XSL.
IMPORTANT : La phrase ci-dessus indique qu'un fichier XML peut être transformé à l'aide de nombreuses feuilles de style XSL différentes.
Transformer XML en XHTML dans le navigateur
Voici le code source nécessaire pour transformer le fichier XML en XHTML sur le client :
Exemple
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"}
catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject
|| xhttp.responseType == "msxml-document")
{
ex =
xml.transformNode(xsl);
document.getElementById("example").innerHTML
= ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument =
xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div
id="example" />
</body>
</html>
Conseil : Si vous ne savez pas comment écrire du JavaScript, veuillez étudier notre didacticiel JavaScript .
Exemple expliqué :
La fonction loadXMLDoc() effectue les opérations suivantes :
- Créer un objet XMLHttpRequest
- Utilisez les méthodes open() et send() de l'objet XMLHttpRequest pour envoyer une requête à un serveur
- Obtenir les données de réponse sous forme de données XML
La fonction displayResult() permet d'afficher le fichier XML stylisé par le fichier XSL :
- Charger des fichiers XML et XSL
- Testez le type de navigateur de l'utilisateur
- Si Internet Explorer :
- Utilisez la méthode transformNode() pour appliquer la feuille de style XSL au document xml
- Définir le corps du document actuel (id="example") pour contenir le document xml stylé
- Si d'autres navigateurs :
- Créez un nouvel objet XSLTProcessor et importez-y le fichier XSL
- Utilisez la méthode transformToFragment() pour appliquer la feuille de style XSL au document xml
- Définir le corps du document actuel (id="example") pour contenir le document xml stylé