tutorial pengembangan web terbaru
 

XSLT - Pada Klien

❮ Sebelumnya Berikutnya Bab ❯

XSLT dapat digunakan untuk mengubah dokumen ke XHTML di browser Anda.

Solusi JavaScript

Dalam bab-bab sebelumnya kita telah menjelaskan bagaimana XSLT dapat digunakan untuk mengubah dokumen dari XML ke XHTML. Kami melakukan ini dengan menambahkan style sheet XSL ke file XML dan membiarkan browser melakukan transformasi.

Bahkan jika ini bekerja dengan baik, tidak selalu diinginkan untuk menyertakan referensi style sheet dalam file XML (eg it will not work in a non XSLT aware browser.)

Solusi yang lebih fleksibel akan menggunakan JavaScript untuk melakukan transformasi.

Dengan menggunakan JavaScript, kita dapat:

  • melakukan pengujian browser tertentu
  • menggunakan style sheet yang berbeda sesuai dengan kebutuhan peramban dan user

Itulah keindahan XSLT! Salah satu tujuan desain untuk XSLT adalah untuk memungkinkan untuk mengubah data dari satu format yang lain, mendukung browser yang berbeda dan kebutuhan pengguna yang berbeda.

XML file dan XSL Berkas

Lihatlah dokumen XML yang telah Anda lihat dalam bab-bab sebelumnya:

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

Lihat file XML .

Dan yang menyertai gaya XSL sheet:

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

Lihat file XSL .

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

IMPORTANT: Kalimat di atas menunjukkan bahwa file XML bisa diubah menggunakan banyak style sheet XSL yang berbeda.

Transformasi XML ke XHTML di Browser

Berikut adalah kode sumber yang diperlukan untuk mengubah file XML ke XHTML pada klien:

Contoh

<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>
Cobalah sendiri "

Tip: Jika Anda tidak tahu bagaimana menulis JavaScript, silakan belajar kami tutorial JavaScript .

Contoh Dijelaskan:

The loadXMLDoc() function does the following:

  • Membuat objek XMLHttpRequest
  • Gunakan open() dan send() metode dari objek XMLHttpRequest untuk mengirim permintaan ke server
  • Mendapatkan data respon sebagai data XML

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

  • Beban XML dan file XSL
  • Menguji jenis browser pengguna memiliki
  • Jika Internet Explorer:
    • Gunakan transformNode() metode untuk menerapkan gaya XSL sheet ke dokumen xml
    • Mengatur tubuh dokumen saat (id="example") mengandung dokumen xml bergaya
  • Jika browser lain:
    • Membuat objek XSLTProcessor baru dan mengimpor file XSL untuk itu
    • Gunakan transformToFragment() metode untuk menerapkan gaya XSL sheet ke dokumen xml
    • Mengatur tubuh dokumen saat (id="example") mengandung dokumen xml bergaya

❮ Sebelumnya Berikutnya Bab ❯