XSLT - บนไคลเอนต์
XSLT สามารถใช้เพื่อแปลงเอกสารเป็น XHTML ในเบราว์เซอร์ของคุณ
โซลูชันจาวาสคริปต์
ในบทที่แล้ว เราได้อธิบายว่า XSLT สามารถใช้เพื่อแปลงเอกสารจาก XML เป็น XHTML ได้อย่างไร เราทำสิ่งนี้โดยเพิ่มสไตล์ชีต XSL ลงในไฟล์ XML และปล่อยให้เบราว์เซอร์ทำการแปลงแม้ว่าจะใช้งานได้ดี แต่ก็ไม่ควรรวมการอ้างอิงสไตล์ชีตในไฟล์ XML เสมอไป (เช่น จะไม่ทำงานในเบราว์เซอร์ที่ไม่ใช่ XSLT)
โซลูชันที่หลากหลายมากขึ้นคือการใช้ JavaScript เพื่อทำการแปลง
โดยใช้ JavaScript เราสามารถ:
- ทำการทดสอบเฉพาะเบราว์เซอร์
- ใช้สไตล์ชีตที่แตกต่างกันไปตามเบราว์เซอร์และความต้องการของผู้ใช้
นั่นคือความงามของ XSLT! เป้าหมายการออกแบบประการหนึ่งสำหรับ XSLT คือการทำให้สามารถเปลี่ยนข้อมูลจากรูปแบบหนึ่งเป็นอีกรูปแบบหนึ่งได้ โดยสนับสนุนเบราว์เซอร์ที่แตกต่างกันและความต้องการของผู้ใช้ที่แตกต่างกัน
ไฟล์ XML และไฟล์ XSL
ดูเอกสาร XML ที่คุณเห็นในบทก่อนหน้านี้:
<?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>
ดูไฟล์ XML
และสไตล์ชีต 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>
ดูไฟล์ XSL
โปรดสังเกตว่าไฟล์ XML ไม่มีการอ้างถึงไฟล์ XSL
สำคัญ:ประโยคด้านบนระบุว่าไฟล์ XML สามารถแปลงได้โดยใช้สไตล์ชีต XSL ที่แตกต่างกันมากมาย
การแปลง XML เป็น XHTML ในเบราว์เซอร์
นี่คือซอร์สโค้ดที่จำเป็นสำหรับการแปลงไฟล์ XML เป็น XHTML บนไคลเอนต์:
ตัวอย่าง
<!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>
เคล็ดลับ:หากคุณไม่ทราบวิธีเขียน JavaScript โปรดศึกษา บทช่วย สอน JavaScriptของ เรา
ตัวอย่างที่อธิบาย:
ฟังก์ชัน loadXMLDoc() ทำสิ่งต่อไปนี้:
- สร้างวัตถุ XMLHttpRequest
- ใช้เมธอด open() และ send() ของอ็อบเจ็กต์ XMLHttpRequest เพื่อส่งคำขอไปยังเซิร์ฟเวอร์
- รับข้อมูลการตอบสนองเป็นข้อมูล XML
ฟังก์ชัน displayResult() ใช้เพื่อแสดงไฟล์ XML ที่จัดรูปแบบโดยไฟล์ XSL:
- โหลดไฟล์ XML และ XSL
- ทดสอบชนิดของเบราว์เซอร์ที่ผู้ใช้มี
- หาก Internet Explorer:
- ใช้เมธอด transformNode() เพื่อใช้สไตล์ชีต XSL กับเอกสาร xml
- ตั้งค่าเนื้อหาของเอกสารปัจจุบัน (id="example") เพื่อให้มีเอกสาร xml ที่มีสไตล์
- หากเบราว์เซอร์อื่น:
- สร้างวัตถุ XSLTProcessor ใหม่และนำเข้าไฟล์ XSL ไปที่มัน
- ใช้เมธอด transformToFragment() เพื่อใช้สไตล์ชีต XSL กับเอกสาร xml
- ตั้งค่าเนื้อหาของเอกสารปัจจุบัน (id="example") เพื่อให้มีเอกสาร xml ที่มีสไตล์