XSLT - pe client

XSLT poate fi folosit pentru a transforma documentul XHTML în browser.

O soluție JavaScript

În capitolele anterioare am explicat modul în care XSLT poate fi folosit pentru a transforma un document din XML în XHTML. Am făcut acest lucru prin adăugarea unei foi de stil XSL la fișierul XML și lăsați browser-ul face transformarea.

Chiar dacă acest lucru funcționează bine, nu este întotdeauna de dorit să se includă o referință foaie de stil într - un fișier XML (eg it will not work in a non XSLT aware browser.) de (eg it will not work in a non XSLT aware browser.) , (eg it will not work in a non XSLT aware browser.) - (eg it will not work in a non XSLT aware browser.)

O soluție mai versatil ar fi de a utiliza un JavaScript pentru a face transformarea.

Prin utilizarea unui JavaScript, putem:

face teste pentru un anumit browser
folosesc diferite foi de stil în funcție de nevoile utilizatorilor și browser

Aceasta este frumusetea XSLT! Unul dintre obiectivele de proiectare pentru XSLT a fost de a face posibilă transformarea datelor de la un format la altul, sprijinind diferite browsere și nevoile utilizatorilor diferite.

Fișierul XML și fișierul XSL

Uită-te la documentul XML pe care le-ați văzut în capitolele anterioare:

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

Vizualizați fișierul XML .

Și foaia de stil XSL de însoțire:

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

Vizualizați fișierul XSL .

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

IMPORTANT: Fraza de mai sus indică faptul că un fișier XML poate fi transformat folosind mai multe foi de stil diferite XSL.

Transformarea XML pentru XHTML în browser

Aici este codul sursă necesar pentru a transforma fișierul XML pentru XHTML pe client:

Exemplu

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

Încearcă - l singur »

Tip: Dacă nu știi cum să scrie JavaScript, vă rugăm studiul nostru Tutorial JavaScript .

Exemplu explicat:

The loadXMLDoc() function does the following:

Crearea unui obiect XMLHttpRequest
Utilizați open() și send() metode ale obiectului XMLHttpRequest pentru a trimite o cerere către un server
A obține datele de răspuns ca date XML

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

Încărcați fișiere XML și XSL
Testați ce fel de browser-ul utilizatorului are
În cazul în care Internet Explorer:
- Utilizați transformNode() metoda de a aplica foaia de stil XSL la documentul XML
- Setați corpul documentului curent (id="example") pentru a conține documentul XML stil
În cazul în care alte browsere:
- Crearea unui nou obiect XSLTProcessor și importați fișierul XSL să-l
- Utilizați transformToFragment() metoda de a aplica foaia de stil XSL la documentul XML
- Setați corpul documentului curent (id="example") pentru a conține documentul XML stil

❮ Anterior Urmatorul capitol ❯

XSLT Tutorial

XPath Tutorial