XSLT - Sul client
XSLT può essere utilizzato per trasformare il documento in XHTML nel tuo browser.
Una soluzione JavaScript
Nei capitoli precedenti abbiamo spiegato come utilizzare XSLT per trasformare un documento da XML a XHTML. Lo abbiamo fatto aggiungendo un foglio di stile XSL al file XML e lasciando che il browser eseguisse la trasformazione.Anche se funziona correttamente, non è sempre desiderabile includere un riferimento a un foglio di stile in un file XML (ad esempio, non funzionerà in un browser non compatibile con XSLT.)
Una soluzione più versatile sarebbe quella di utilizzare un JavaScript per eseguire la trasformazione.
Utilizzando un JavaScript, possiamo:
- eseguire test specifici del browser
- utilizzare fogli di stile diversi in base alle esigenze del browser e dell'utente
Questa è la bellezza di XSLT! Uno degli obiettivi di progettazione di XSLT era rendere possibile la trasformazione dei dati da un formato all'altro, supportando browser diversi e diverse esigenze degli utenti.
Il file XML e il file XSL
Guarda il documento XML che hai visto nei capitoli precedenti:
<?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>
E il foglio di stile XSL allegato:
<?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>
Si noti che il file XML non ha un riferimento al file XSL.
IMPORTANTE: la frase precedente indica che un file XML può essere trasformato utilizzando molti fogli di stile XSL diversi.
Trasformare XML in XHTML nel browser
Ecco il codice sorgente necessario per trasformare il file XML in XHTML sul client:
Esempio
<!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>
Suggerimento: se non sai come scrivere JavaScript, studia il nostro tutorial JavaScript .
Esempio spiegato:
La funzione loadXMLDoc() esegue le seguenti operazioni:
- Creare un oggetto XMLHttpRequest
- Utilizzare i metodi open() e send() dell'oggetto XMLHttpRequest per inviare una richiesta a un server
- Ottieni i dati di risposta come dati XML
La funzione displayResult() viene utilizzata per visualizzare il file XML con lo stile del file XSL:
- Carica file XML e XSL
- Verifica che tipo di browser ha l'utente
- Se Internet Explorer:
- Utilizzare il metodo transformNode() per applicare il foglio di stile XSL al documento xml
- Imposta il corpo del documento corrente (id="example") in modo che contenga il documento XML con stile
- Se altri browser:
- Crea un nuovo oggetto XSLTProcessor e importa su di esso il file XSL
- Utilizzare il metodo transformToFragment() per applicare il foglio di stile XSL al documento XML
- Imposta il corpo del documento corrente (id="example") in modo che contenga il documento XML con stile