XSLT - asiakaspuolella

Jos selainsi tukee XSLT:ää, sitä voidaan käyttää dokumentin muuntamiseen XHTML:ksi.

JavaScript-ratkaisu

Edellisessä luvussa olemme kertoneet, miten voit käyttää XSLT:ää muuntaa XML-dokumenttia XHTML:ksi. Teimme tämän seuraavalla tavalla: lisäämällä XSL-tyylisivun XML-tiedostoon ja suorittamalla muunnos selaimella.

Vaikka tämä menetelmä toimii hyvin, ei aina ole tyydyttävää sisällyttää tyylisivujen viittauksia XML-tiedostoihin (esimerkiksi, jos selaimessa ei tunnista XSLT:ää, tämä menetelmä ei toimi).

Yleisempi tapa on käyttää JavaScriptiä muunnosten suorittamiseen.

Voimme käyttää JavaScriptiä seuraavasti:

  • Suorita selaimen varmistustesti
  • Käytä eri tyylisivuja selaimen ja käyttäjän tarpeiden mukaan

Tämä on juuri XSLT:n houkuttelevuus! Yksi XSLT:n suunnittelutavoitteista on mahdollistaa muodon muuttaminen toiseen muotoon, samalla tukien erilaisia selaimia ja erilaisia käyttäjätarpeita.

Selainpohjainen XSLT-muunnos tulee varmasti olemaan tulevaisuuden selaimien suorittamien päätehtävistä yksi, ja näemme sen kasvavan erityisesti tiettyjen selaimien markkinoilla (silmälasit, verkkopainimet, kuuntelulaitteet jne.).

XML- ja XSL-tiedostot

Katso tämä XML-dokumentti, joka on esitetty edellisessä luvussa:

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

Tarkastele tätä XML-tiedostoa.

ja mukana oleva XSL-tyylisivu:

<?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>My CD Collection</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>

Tarkastele tätä XSL-tiedostoa.

Huomaa, että tämä XML-tiedosto ei sisällä viittauksia XSL-tiedostoon.

Tärkeää:Tämä tarkoittaa, että XML-tiedostoa voidaan muuntaa useilla eri XSL-tyyleillä.

Muunna XML XHTML:ksi selaimessa

Tämä on lähdekoodi, joka käytetään XML-tiedoston muuntamiseen XHTML:ksi asiakaspuolella:

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

Vinkki:Jos et tiedä, miten kirjoittaa JavaScript, opeta meidänJavaScript-opas》。

Ensimmäinen osa luo Microsoftin XML-tulkinnan instanssin ja luoja XML-tiedoston muistiin. Toinen osa luo toisen tulkinnan instanssin ja luoja XSL-tiedoston muistiin. Viimeinen rivi käyttää XSL-dokumenttia muuntamaan XML-dokumenttia ja näyttää tuloksen selaimessa XHTML:nä. Tehtävä suoritettu!

Katso, miten se toimii IE:ssä.