XSLT - Klient

Jeśli Twoja przeglądarka obsługuje XSLT, może być używana do konwersji dokumentu na XHTML.

Rozwiązanie oparte na JavaScript

W poprzednich rozdziałach wyjaśniliśmy, jak używać XSLT do konwersji dokumentu XML na XHTML. Zrobiliśmy to poprzez dodanie arkusza stylów XSL do pliku XML i przeprowadzenie konwersji przez przeglądarkę.

Choć ten sposób działa dobrze, włączenie odwołań do arkuszy stylów w pliku XML nie zawsze jest zadowalające (np. w przeglądarkach, które nie rozpoznają XSLT, ta metoda nie działa).

Jednym z bardziej ogólnych sposobów jest użycie JavaScript do wykonania konwersji.

Dzięki użyciu JavaScript, możemy:

  • Przeprowadź testy potwierdzające przeglądarki
  • Używaj różnych arkuszy stylów w zależności od przeglądarki i potrzeb użytkownika

Oto urok XSLT! Jednym z celów projektowania XSLT jest możliwość przekształcania jednego formatu na inny, jednocześnie wspierając różne typy przeglądarek oraz różne potrzeby użytkowników.

Konwersja XSLT na końcu klienta będzie jednym z głównych zadań wykonywanych przez przyszłe przeglądarki, a także zobaczymy jego rozwój na rynku przeglądarek (dla osób niewidomych, drukarek sieciowych, urządzeń słuchowych itp.).

Pliki XML i XSL

Proszę spojrzeć na ten XML dokument, który został już przedstawiony w poprzednich rozdziałach:

<?xml version="1.0" encoding="ISO-8859-1"?>
<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>

Zobacz ten plik XML.

oraz towarzyszący mu szablon XSL:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>Moja kolekcja płyt CD</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th> 
        <th 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>

Zobacz ten plik XSL.

Proszę zauważyć, że ten plik XML nie zawiera odniesień do plików XSL.

Ważne informacje:To oznacza, że plik XML można przekształcić za pomocą wielu różnych szablonów XSL.

Konwersja XML na XHTML w przeglądarce

To jest kod źródłowy używany do konwersji pliku XML na XHTML w przeglądarce:

<html>
<body>
<script type="text/javascript">
// Wczytaj XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Wczytaj XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

Wskazówka:Jeśli nie wiesz, jak pisać JavaScript, naucz się naszego:Tutorial JavaScript>

Pierwszy kod tworzy instancję parsera XML Microsoft, a następnie wczytuje plik XML do pamięci. Drugi kod tworzy inną instancję parsera, a następnie wczytuje plik XSL do pamięci. Ostatni wiersz kodu używa dokumentu XSL do przekształcenia dokumentu XML i wyświetla wynik jako XHTML w przeglądarce. Zadanie zakończone!

Zobacz, jak działa w IE.