XSLT บนไคลเอนต์
หากเบราว์เซอร์ของคุณสนับสนุน XSLT แล้วเบราว์เซอร์ที่สามารถใช้ในการแปลงเอกสารเพื่อ XHTML
วิธีการแก้ปัญหา JavaScript
ในบทก่อนหน้านี้เราได้สอนวิธีการใช้ XSLT ในการแปลงเอกสาร XML เข้า XHTML เราทำเช่นนี้ผ่านวิธีต่อไปนี้: เพิ่มสไตล์ชีต XSL ยังไฟล์ XML และเสร็จสิ้นการแปลงผ่านเบราว์เซอร์แม้ว่าผลของวิธีการนี้เป็นสิ่งที่ดีมากอ้างอิงสไตล์ชีทไม่ได้น่าพอใจเสมอ (ตัวอย่างเช่นในเบราว์เซอร์ XSLT ไม่รู้จักวิธีการนี้จะไม่ทำงาน) รวมอยู่ในไฟล์ XML
วิธีการทั่วไปมากขึ้นคือการใช้งาน JavaScript เพื่อเสร็จสิ้นการแปลง
โดยใช้ JavaScript เราสามารถ:
- เบราว์เซอร์สำหรับการทดสอบยืนยัน
- ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์และความต้องการของผู้ใช้สไตล์ที่แตกต่างกัน
นี่คือเสน่ห์ XSLT! XSLT เป็นหนึ่งในการออกแบบเพื่อให้ข้อมูลจากรูปแบบหนึ่งไปอีกรูปแบบหนึ่งที่เป็นไปได้และการสนับสนุนที่แตกต่างกันของเบราว์เซอร์และความต้องการของผู้ใช้ที่แตกต่างกัน
แปลง XSLT ไคลเอนต์จะกลายเป็นหนึ่งในอนาคตในงานหลักที่ดำเนินการโดยเบราว์เซอร์และเราจะเห็นการเติบโตของ บริษัท (อักษรเบรลล์, เบราว์เซอร์หูเครื่องพิมพ์เครือข่ายอุปกรณ์มือถืออื่น ๆ ) ในตลาดเบราว์เซอร์โดยเฉพาะอย่างยิ่ง
เอกสาร XML และไฟล์ XSL
ดูที่นี้ในส่วนก่อนหน้านี้ได้แสดงให้เห็นออกเอกสาร XML:
<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>
และมาพร้อมกับสไตล์ชีท XSL:
<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>
โปรดทราบว่าไฟล์ XML ไม่ได้มีการอ้างอิงถึงไฟล์ XSL
สำคัญ: ประโยคข้างต้นหมายความว่าไฟล์ XML สามารถใช้หลาย stylesheets XSL ที่แตกต่างกันในการแปลง
ในเบราว์เซอร์แปลง XML เพื่อ XHTML
นี้สำหรับลูกค้าที่จะไฟล์ XML ในซอร์สโค้ด XHTML:
ตัวอย่าง
<head>
<script>
function loadXMLDoc(dname)
{
if (window.ActiveXObject)
{
xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
else
{
xhttp=new XMLHttpRequest();
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, 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 () ฟังก์ชัน
loadXMLDoc () ฟังก์ชั่นที่ใช้ในการโหลด XML และ XSL ไฟล์
มันจะตรวจสอบชนิดของเบราว์เซอร์และผู้ใช้มีการโหลดไฟล์
displayResult () ฟังก์ชัน
ฟังก์ชั่นนี้จะใช้ในการกำหนดรูปแบบการแสดงไฟล์ XML โดยใช้ไฟล์ XSL
- โหลด XML และ XSL ไฟล์
- ผู้ใช้ทดสอบมีประเภทเบราว์เซอร์
- หากวัตถุ ActiveX สนับสนุนเบราว์เซอร์ของผู้ใช้:
- ใช้ transformNode () วิธีการสไตล์ชีต XSL เพื่อเอกสาร XML
- ตั้งค่าเอกสารปัจจุบัน (id = "ตัวอย่าง") ประกอบด้วยลักษณะร่างกายมีการใช้เอกสาร XML
- หากเบราว์เซอร์ของผู้ใช้ไม่สนับสนุนวัตถุ ActiveX:
- สร้างวัตถุและ XSL ใหม่นำเข้าไฟล์ XSLTProcessor
- ใช้ transformToFragment () วิธีการสไตล์ชีต XSL เพื่อเอกสาร XML
- ตั้งค่าเอกสารปัจจุบัน (id = "ตัวอย่าง") ประกอบด้วยลักษณะร่างกายมีการใช้เอกสาร XML