Gli ultimi tutorial di sviluppo web
 

XSLT - Sul client

❮ Precedente Successivo Capitolo ❯

XSLT può essere utilizzato per trasformare il documento XHTML nel tuo browser.

Una soluzione JavaScript

Nei capitoli precedenti abbiamo spiegato come XSLT può essere utilizzato per trasformare un documento da XML a XHTML. L'abbiamo fatto con l'aggiunta di un foglio di stile XSL per il file XML e lasciare che il browser fare la trasformazione.

Anche se questo funziona bene, non è sempre auspicabile includere un riferimento foglio di stile in un file XML (eg it will not work in a non XSLT aware browser.)

Una soluzione più versatile sarebbe quella di utilizzare un JavaScript per fare la trasformazione.

Utilizzando un JavaScript, siamo in grado di:

  • fare test specifico del browser
  • utilizzare diversi fogli di stile in base al browser e le esigenze degli utenti

Questa è la bellezza di XSLT! Uno degli obiettivi di progettazione per XSLT è stato quello di rendere possibile per trasformare i dati da un formato ad un altro, supportare diversi browser e diverse esigenze degli utenti.

Il file XML e il file XSL

Guardate il documento XML che avete 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>

Visualizzare il file XML .

E lo accompagna foglio di stile XSL:

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

Visualizzare il file XSL .

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: La frase di cui sopra indica che un file XML potrebbe essere trasformato utilizzando molti fogli di stile XSL diversi.

Trasformare XML a XHTML nel Browser

Ecco il codice sorgente necessario per trasformare il file XML a XHTML sul client:

Esempio

<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>
Prova tu stesso "

Tip: Se non sai come scrivere JavaScript, studiare la nostra esercitazione JavaScript .

Esempio spiegato:

The loadXMLDoc() function does the following:

  • Creare un oggetto XMLHttpRequest
  • Utilizzare la open() e send() metodi dell'oggetto XMLHttpRequest per inviare una richiesta a un server
  • Ottenere i dati di risposta come dati XML

The displayResult() function is used to display the XML file styled by the XSL file:

  • XML Caricare e file XSL
  • Prova che tipo di browser che l'utente ha
  • Se Internet Explorer:
    • Utilizzare la transformNode() metodo per applicare il foglio di stile XSL per il documento XML
    • Impostare il corpo del documento corrente (id="example") per contenere il documento XML in stile
  • Se altri browser:
    • Creare un nuovo oggetto XSLTProcessor e importare il file XSL ad esso
    • Utilizzare la transformToFragment() metodo per applicare il foglio di stile XSL per il documento XML
    • Impostare il corpo del documento corrente (id="example") per contenere il documento XML in stile

❮ Precedente Successivo Capitolo ❯