第7章 XSL格式化创新格式XML文档

7.1 设计需求

给定如下XML文档：

<?xml version="1.0" encoding="utf-8"?>
<table id="books" border="1">
    <tr bgcolor="yellow">
        <th>书号</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
    <tr class="book">
        <td>8475484848</td>
        <td>XML技术</td>
        <td>80</td>
    </tr>
    <tr class="book">
        <td>35235348</td>
        <td>Python programming</td>
        <td>65</td>
    </tr>
    <tr class="book">
        <td>67676348</td>
        <td>Java development</td>
        <td>76</td>
    </tr>
    <tr class="book">
        <td>27974348</td>
        <td>NodeJS development</td>
        <td>90</td>
    </tr>
</table>

现提出如下设计需求：

设计尽可能通用的XSLT模板。
用户可查看XML文档、XSLT文档内容。
设计应用程序调用XSLT文件格式化以上XML数据以表格形式输出。

7.2 设计分析

7.2.1 功能分析

测试用户期望功能描述如下：

查看创新格式XML源文件文本内容。
查看XSLT源文件文本内容。
查看XML与XSL绑定后格式化（表格形式）输出结果

测试用户期望功能用例图如图7.1所示。

图7.1 用户用例建模

7.2.2 核心业务数据流分析

数据流核心环节描述如下：

文件读取框架读取XML源文件生成XML文档对象。
文件读取框架读取XSLT源文件生成XSL文档对象
对象绑定模块将XML文档对象与XSL文档对象绑定并并输出格式化结果。

数据流核心环节建模如图7.2所示。

图7.2 核心业务数据流

7.2.3 文件包及文件设计分析

基于分层架构视角的文件包及文件设计如表3.1所述。

序号	包设计	文件设计
1	设计表示层包（包名：UI），相当表示层文件容器。	设计界面主页文件main.js。设计XSLT文件X.xslt，包含格式化输出逻辑。设计自定义JS框架文件XSLT.js，包含绑定XML、XSL逻辑。
2	设计数据层包（包名：data），相当数据层文件容器。	设计XML数据测试文件books_new.xml。

文件包建模如图7.3所示。

图7.3 文件包建模

序号	文件名	作用
1	Books_new.xml	创新格式XML文档源文件
2	X.xslt	格式化XML表格化输出对应XSLT文件
3	XSLT.js	自定义框架，可实现将XSL与XML绑定并输出格式化数据。
4	main.html	实现人机交互的用户界面主页
5	jquery-1.11.1.js	加载Jquery函数库，辅助主页前端处理。
	UI	界面处理逻辑文件所在文件夹
	data	数据文件所在文件夹

7.4 代码实现

7.4.1 主页实现代码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .view_sp{
            background-color:black;
            color:white;
            cursor:pointer
        }
    </style>
</head>
<body>
    <h2>XSL格式化创新XML文档测试</h2>
    <hr />
    <span class="view_sp" onclick="view_doc('./data/books_new.xml')">查看XML文档</span>
    <span class="view_sp" onclick="view_doc('./UI/X.xslt')">查看XSL文档</span>
    <hr />
    <input type="button" value="XSLT格式化XML输出" 
           onclick="displayXML('./data/books_new.xml','./UI/X.xslt','result_div')" />
    <hr />
    <div id="result_div">
    </div>
</body>
</html>
<script type="text/javascript" src="./UI/XSLT.js"></script>
<script type="text/javascript" src="./UI/jquery-1.11.1.js"></script>
<script type="text/javascript">
    //查看原始文档
    function view_doc(file) {
        $.get(file, function (data) { alert(data); }, "text");
    }
</script>

7.4.2 XSLT代码

文件X.xslt实现代码：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/table">
        <table border="1">
            <tr>
                <th>
                    <xsl:value-of select="tr[1]/th[1]"/>
                </th>
                <th>
                    <xsl:value-of select="tr[1]/th[2]"/>
                </th>
                <th>
                    <xsl:value-of select="tr[1]/th[3]"/>
                </th>
            </tr>
            <xsl:for-each select="tr[position()>1]">
                <tr>
                    <td>
                        <xsl:value-of select="td[1]"/>
                    </td>
                    <td>
                        <xsl:value-of select="td[2]"/>
                    </td>
                    <td>
                        <xsl:value-of select="td[3]"/>
                    </td>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>
</xsl:stylesheet>

7.4.3 自定义JS脚本代码

文件XSLT.js实现代码：

// JavaScript source code
var xhttp;

function loadXMLDoc(filename) {
    if (window.ActiveXObject) {
        xhttp = new ActiveXObject("Msxml3.XMLHTTP");
    } else {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayXML(xmlFile, xsltFile, div_id) {
    xml = loadXMLDoc(xmlFile);
    xsl = loadXMLDoc(xsltFile);
    // code for IE
    if (window.ActiveXObject) {
        ex = xml.transformNode(xsl);
        document.getElementById(div_id).innerHTML = "";
        document.getElementById(div_id).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(div_id).innerHTML = "";
        document.getElementById(div_id).appendChild(resultDocument);
    }
}

7.4.4 实现效果

XSL格式化创新XML文档测试效果如图7.5所示。

图7.5 XSL格式化创新XML文档测试

7.6 仿真实训

给定如下创新格式XML文档：

<?xml version="1.0" encoding="utf-8"?>
<table id=" trs">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr category="new_student">
        <td>8475484848</td>
        <td>Max</td>
        <td>18</td>
    </tr>
    <tr>
        <td>35235348</td>
        <td>Jack</td>
        <td>20</td>
    </tr>
    <tr>
        <td>67676348</td>
        <td>Json</td>
        <td>21</td>
    </tr>
    <tr>
        <td>27974348</td>
        <td>Rose</td>
        <td>19</td>
    </tr>
</table>