ล่าสุดการพัฒนาเว็บบทเรียน
 

XSLT - บนไคลเอนต์

❮ก่อนหน้า ถัดไปบท❯

XSLT สามารถใช้ในการแปลงเอกสารเพื่อ XHTML ในเบราว์เซอร์ของคุณ

โซลูชั่น JavaScript

ในบทที่ก่อนหน้านี้เราได้อธิบายวิธี XSLT สามารถใช้ในการแปลงเอกสารจาก XML เพื่อ XHTML เราทำอย่างนี้โดยการเพิ่มสไตล์ชีท XSL ไปยังไฟล์ XML และปล่อยให้เบราว์เซอร์ทำการเปลี่ยนแปลง

แม้ว่างานนี้ดีก็มักจะไม่พึงปรารถนาที่จะรวมถึงการอ้างอิงแผ่นในรูปแบบไฟล์ XML (eg it will not work in a non XSLT aware browser.)

วิธีการแก้ปัญหาที่หลากหลายมากขึ้นจะใช้งาน 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="/">
  <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>

ดูไฟล์ XSL

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

IMPORTANT: ประโยคข้างต้นแสดงให้เห็นว่าไฟล์ XML จะถูกเปลี่ยนโดยใช้หลายแผ่นสไตล์ XSL ที่แตกต่างกัน

เปลี่ยน XML เพื่อ XHTML ในเบราว์เซอร์

นี่คือรหัสที่มาที่จำเป็นในการแปลงไฟล์ XML เพื่อ XHTML บนไคลเอนต์:

ตัวอย่าง

<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: หากคุณไม่ทราบวิธีการเขียน JavaScript โปรดศึกษาของเรา กวดวิชา JavaScript

ตัวอย่างอธิบาย:

The loadXMLDoc() function does the following:

  • สร้างวัตถุ XMLHttpRequest
  • ใช้ open() และ send() วิธีการของวัตถุ XMLHttpRequest เพื่อส่งคำขอไปยังเซิร์ฟเวอร์
  • ได้รับข้อมูลการตอบสนองเป็นข้อมูล XML

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

  • โหลดไฟล์ XML และ XSL
  • ทดสอบสิ่งที่ชนิดของเบราว์เซอร์ผู้ใช้มี
  • ถ้า Internet Explorer:
    • ใช้ transformNode() วิธีการใช้แผ่นลักษณะ XSL เพื่อเอกสาร XML
    • ตั้งศพของเอกสารปัจจุบัน (id="example") เพื่อให้มีเอกสาร XML สไตล์
  • หากเบราว์เซอร์อื่น ๆ :
    • สร้างวัตถุ XSLTProcessor ใหม่และนำเข้าไฟล์ XSL เพื่อมัน
    • ใช้ transformToFragment() วิธีการใช้แผ่นลักษณะ XSL เพื่อเอกสาร XML
    • ตั้งศพของเอกสารปัจจุบัน (id="example") เพื่อให้มีเอกสาร XML สไตล์

❮ก่อนหน้า ถัดไปบท❯