XSLT - Di Klien
XSLT dapat digunakan untuk mengubah dokumen menjadi XHTML di browser Anda.
Solusi JavaScript
Dalam bab sebelumnya kami telah menjelaskan bagaimana XSLT dapat digunakan untuk mengubah dokumen dari XML ke XHTML. Kami melakukan ini dengan menambahkan lembar gaya XSL ke file XML dan membiarkan browser melakukan transformasi.Bahkan jika ini berfungsi dengan baik, tidak selalu diinginkan untuk menyertakan referensi lembar gaya dalam file XML (mis. itu tidak akan berfungsi di browser yang tidak mengetahui XSLT.)
Solusi yang lebih fleksibel adalah dengan menggunakan JavaScript untuk melakukan transformasi.
Dengan menggunakan JavaScript, kita dapat:
- lakukan pengujian khusus browser
- gunakan style sheet yang berbeda sesuai dengan browser dan kebutuhan pengguna
Itulah keindahan XSLT! Salah satu tujuan desain untuk XSLT adalah memungkinkan untuk mengubah data dari satu format ke format lainnya, mendukung berbagai browser dan kebutuhan pengguna yang berbeda.
File XML dan File XSL
Lihatlah dokumen XML yang telah Anda lihat di 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>
Dan lembar gaya XSL yang menyertainya:
<?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>
Perhatikan bahwa file XML tidak memiliki referensi ke file XSL.
PENTING: Kalimat di atas menunjukkan bahwa file XML dapat diubah menggunakan banyak lembar gaya XSL yang berbeda.
Mengubah XML ke XHTML di Browser
Berikut adalah kode sumber yang diperlukan untuk mengubah file XML menjadi XHTML pada klien:
Contoh
<!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>
Tip: Jika Anda tidak tahu cara menulis JavaScript, silakan pelajari tutorial JavaScript kami .
Contoh Dijelaskan:
Fungsi loadXMLDoc() melakukan hal berikut:
- Buat objek XMLHttpRequest
- Gunakan metode open() dan send() dari objek XMLHttpRequest untuk mengirim permintaan ke server
- Dapatkan data respons sebagai data XML
Fungsi displayResult() digunakan untuk menampilkan file XML yang ditata oleh file XSL:
- Muat file XML dan XSL
- Uji jenis browser apa yang dimiliki pengguna
- Jika Internet Explorer:
- Gunakan metode transformNode() untuk menerapkan lembar gaya XSL ke dokumen xml
- Setel isi dokumen saat ini (id="contoh") agar memuat dokumen xml yang ditata
- Jika browser lain:
- Buat objek XSLTProcessor baru dan impor file XSL ke sana
- Gunakan metode transformToFragment() untuk menerapkan lembar gaya XSL ke dokumen xml
- Setel isi dokumen saat ini (id="contoh") agar memuat dokumen xml yang ditata