JSP 中以 AJAX 獲取 XML 並套用 XSLT 樣式表轉換顯示

架構流程

1. 瀏覽器點擊按鈕 → JavaScript XMLHttpRequest 請求 Vehicles.xml。
2. 取得 XML 文字內容後，載入 Vehicles.xsl。
3. 呼叫 xml.transformNode(xsl) 產生 HTML 片段。
4. 注入頁面 <div id="show"> 顯示。

核心代碼

1. JSP 頁面 (ceshi.jsp)

<%@ page contentType="text/html;charset=GBK" %>
<script src="js/request.js"></script> <!-- 封裝 XMLHttpRequest -->
<script>
function showXML() {
    get_request("Vehicles.xml", "text"); // 非同步取得 XML 文字
}
function pageChange(responseText) {
    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.loadXML(responseText);           // 載入 XML 字串

    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async = false;
    xsl.load("Vehicles.xsl");            // 載入 XSL 檔案

    document.getElementById("show").innerHTML = xml.transformNode(xsl);
}
</script>
<input type="button" value="提交" onclick="showXML()" />
<div id="show"></div>

2. XML 資料 (Vehicles.xml)

<?xml version="1.0" encoding="gb2312"?>
<vehicles>
    <vehicle year="1002" make="Land Rover" model="Discovery">
        <mileage>36500</mileage>
        <color>black</color>
        <price>$32999</price>
    </vehicle>
</vehicles>

3. XSL 樣式表 (Vehicles.xsl)

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/TR/WD=xsl">
<xsl:template match="/">
    <html><body>
    <table border="2" align="center">
        <tr><th>Year</th><th>Make</th><th>Model</th><th>Mileage</th><th>Color</th><th>Price</th></tr>
        <xsl:for-each select="vehicles/vehicle" order-by="+price">
            <tr>
                <td><xsl:value-of select="@year"/></td>
                <td><xsl:value-of select="@make"/></td>
                <td><xsl:value-of select="@model"/></td>
                <td><xsl:value-of select="mileage"/></td>
                <td><xsl:value-of select="color"/></td>
                <td><xsl:value-of select="price"/></td>
            </tr>
        </xsl:for-each>
    </table>
    </body></html>
</xsl:template>
</xsl:stylesheet>

關鍵技術點

• load() 載入 XML 檔案，loadXML() 載入字串。
• transformNode(xsl) 為 IE/MSXML 專屬方法；現代瀏覽器應改用 XSLTProcessor。
• 同源策略：XML 與 XSL 需同域，或伺服器設定 CORS。

現代化改寫建議

// 現代瀏覽器通用寫法
fetch("Vehicles.xml").then(r => r.text()).then(xmlText => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");
    fetch("Vehicles.xsl").then(r => r.text()).then(xslText => {
        const xslDoc = parser.parseFromString(xslText, "application/xml");
        const processor = new XSLTProcessor();
        processor.importStylesheet(xslDoc);
        const resultDoc = processor.transformToFragment(xmlDoc, document);
        document.getElementById("show").appendChild(resultDoc);
    });
});