XSLT - na kliencie
XSLT może być użyty do przekształcenia dokumentu do XHTML w Twojej przeglądarce.
Rozwiązanie JavaScript
W poprzednich rozdziałach wyjaśniliśmy, w jaki sposób XSLT może zostać użyty do przekształcenia dokumentu z XML na XHTML. Zrobiliśmy to, dodając arkusz stylów XSL do pliku XML i pozwalając przeglądarce wykonać transformację.Nawet jeśli działa to dobrze, nie zawsze jest pożądane dołączenie odwołania do arkusza stylów w pliku XML (np. nie będzie działać w przeglądarce nieobsługującej XSLT).
Bardziej uniwersalnym rozwiązaniem byłoby użycie JavaScript do przeprowadzenia transformacji.
Za pomocą JavaScriptu możemy:
- wykonuj testy specyficzne dla przeglądarki
- używaj różnych arkuszy stylów w zależności od przeglądarki i potrzeb użytkownika
Na tym polega piękno XSLT! Jednym z celów projektowych XSLT było umożliwienie przekształcania danych z jednego formatu na inny, obsługując różne przeglądarki i różne potrzeby użytkowników.
Plik XML i plik XSL
Spójrz na dokument XML, który widziałeś w poprzednich rozdziałach:
<?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>
I towarzyszący arkusz stylów 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="/">
<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>
Zauważ, że plik XML nie zawiera odniesienia do pliku XSL.
WAŻNE: Powyższe zdanie wskazuje, że plik XML można przekształcić przy użyciu wielu różnych arkuszy stylów XSL.
Przekształcanie XML do XHTML w przeglądarce
Oto kod źródłowy potrzebny do przekształcenia pliku XML do XHTML na kliencie:
Przykład
<!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>
Wskazówka: jeśli nie wiesz, jak pisać JavaScript, zapoznaj się z naszym samouczkiem JavaScript .
Przykład wyjaśniony:
Funkcja loadXMLDoc() wykonuje następujące czynności:
- Utwórz obiekt XMLHttpRequest
- Użyj metod open() i send() obiektu XMLHttpRequest, aby wysłać żądanie do serwera
- Pobierz dane odpowiedzi jako dane XML
Funkcja displayResult() służy do wyświetlania pliku XML stylizowanego przez plik XSL:
- Załaduj pliki XML i XSL
- Sprawdź, jaką przeglądarkę ma użytkownik
- Jeśli Internet Explorer:
- Użyj metody transformNode(), aby zastosować arkusz stylów XSL do dokumentu xml
- Ustaw treść bieżącego dokumentu (id="przykład") tak, aby zawierała stylizowany dokument xml
- Jeśli inne przeglądarki:
- Utwórz nowy obiekt XSLTProcessor i zaimportuj do niego plik XSL
- Użyj metody transformToFragment(), aby zastosować arkusz stylów XSL do dokumentu xml
- Ustaw treść bieżącego dokumentu (id="przykład") tak, aby zawierała stylizowany dokument xml