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. Nous avons fait cela en ajoutant une feuille de style XSL dans le fichier XML et laisser le navigateur faire la transformation.Même si cela fonctionne bien, il est pas toujours souhaitable d'inclure une référence de feuille de style dans un fichier XML (eg it will not work in a non XSLT aware browser.) , (eg it will not work in a non XSLT aware browser.)
Une solution plus polyvalente serait d'utiliser un JavaScript pour faire 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 l'utilisateur
Telle est la beauté de XSLT! L'un des objectifs de conception pour XSLT était de permettre de transformer les données d'un format à un autre, supportant les 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 d'accompagnement:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<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>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Notice that the XML file does not have a reference to the XSL file.
IMPORTANT: La phrase ci - dessus indique qu'un fichier XML peut être transformé à l' aide de différentes feuilles de style XSL.
Transformer XML en XHTML dans le navigateur
Voici le code source nécessaire pour transformer le fichier XML en XHTML sur le client:
Exemple
<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> Essayez vous - même » Tip: Si vous ne savez pas comment écrire JavaScript, s'il vous plaît étudier notre tutoriel JavaScript .
Exemple Explained:
The loadXMLDoc() function does the following:
- Créer un objet XMLHttpRequest
- Utilisez l' open() et send() méthodes de l'objet XMLHttpRequest pour envoyer une requête à un serveur
- Obtenir les données de réponse sous forme de données XML
The displayResult() function is used to display the XML file styled by the XSL file:
- XML Charger et fichiers XSL
- Testez quel type de navigateur l'utilisateur
- Si Internet Explorer:
- Utilisez le transformNode() méthode pour appliquer la feuille de style XSL au document xml
- Réglez le corps du document en cours (id="example") pour contenir le document XML style
- Si d'autres navigateurs:
- Créer un nouvel objet XSLTProcessor et importer le fichier XSL lui
- Utilisez le transformToFragment() méthode pour appliquer la feuille de style XSL au document xml
- Réglez le corps du document en cours (id="example") pour contenir le document XML style