Chapter 1: XML and HTML

1.1 设计需求

给定如下XML代码：

<?xml version="1.0" encoding="utf-8"?>
<books category="IT">
    <book>
        <ISBN>8475484848</ISBN>
        <title>XML技术</title>
        <price>80</price>
    </book>
    <book>
        <ISBN>35235348</ISBN>
        <title>Python programming</title>
        <price>65</price>
    </book>
    <book>
        <ISBN>67676348</ISBN>
        <title>Java development</title>
        <price>76</price>
    </book>
    <book>
        <ISBN>27974348</ISBN>
        <title>NodeJS development</title>
        <price>90</price>
    </book>
</books>

给定如下HTML代码：

<table border="1">
    <tr style="background-color:greenyellow">
        <td>8475484848</td>
        <td>XML技术</td>
        <td>80</td>
    </tr>
    <tr>
        <td>35235348</td>
        <td>Python programming</td>
        <td>65</td>
    </tr>
    <tr>
        <td>67676348</td>
        <td>Java development</td>
        <td>76</td>
    </tr>
    <tr>
        <td>27974348</td>
        <td>NodeJS development</td>
        <td>90</td>
    </tr>
</table>

提出如下设计需求：

用户可动态读取以上代码并以文本形式呈现在用户界面。
让浏览器解析以上XML代码并呈现结果。
让浏览器解析以上HTML代码并呈现结果。

1.2 设计分析

1.2.1 功能分析

测试用户期望功能如下：

测试用户读取XML文档并以文本形式呈现。
测试用户测试浏览器解析当前XML格式文本。
测试用户读取创新XML文档并以文本形式呈现。
测试用户测试浏览器解析当前HTML格式文本。

测试用户用例建模如图1.1所示。

图1.1 测试用户用例建模

1.2.2 数据流分析

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

文件处理框架读取XML或HTML源文件并生生可视标记文本数据。
浏览器解析器解析标记文本数据并输出格式化数据（如：表格形式）。

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

图1.2 数据流核心环节

1.2.3 文件包设计分析

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

表1.1 文件包及文件设计
序号	包设计	文件设计
1	设计表示层包（包名：UI），相当表示层文件容器。	(1) 设计界面主页文件main.js。 (2) 主页引入jquery框架（jquery.js），辅助表示层处理，也可读取测试文件。
2	设计数据层包（包名：data），相当数据层文件容器。	(1) 设计XML数据测试文件books.xml。 (2) 设计HTML数据测试文件books.html。

文件包建模如图1.3所示。

图1.3 文件包建模

1.3 文件架构

文件架构如图1.4所示。

图1.4 文件架构

文件主要功能说明见表1.2。

表1.2 文件主要功能说明
序号	文件（夹）名	作用
1	books.xml	用于测试的XML基础数据
2	books.html	用于测试的HTML基础数据
3	jquery-1.11.1.js	加载JQuery函数库，辅助数据可视处理及读取测试基础数据。
4	main.html	实现人机交互的用户界面主页
5	UI	界面处理逻辑文件所在文件夹
6	data	数据文件所在文件夹

说明：

实际应用中，考虑到$.get()不能跳出当前文件夹读取文件，主页文件暂时放在UI外围。

1.4 代码实现

1.4.1 主页实现

主页文件main.html实现代码:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h2>XML与HTML比较测试</h2>
    <hr />
    <input type="button" value="查看XML代码" onclick="view_XMLcode()" />
    <input type="button" value="查看HTML代码" onclick="view_HTMLcode()" />
    <hr />
    <textarea id="code_text" style="width:500px;height:300px">
在这里加载XML或HTML代码文本
    </textarea>
    <br />
    <input type="button" value="浏览器解析当前代码" onclick="IE_Parse_code()" />
    <hr />
    <div id="out_result">
    </div>
</body>
</html>

<script type="text/javascript" src="./UI/jquery-1.11.1.js"></script>

<script type="text/javascript">
    var tag;

    function view_XMLcode() {
        $.get("./data/books.xml", function (data) {
            $("#code_text").text(data);
            tag = "XML"
        }, "text");
    }

    function view_HTMLcode() {
        $.get("./data/books.html", function (data) {
            $("#code_text").text(data);
            tag = "HTML";
        }, "text");
    }

    function IE_Parse_code() {
        if (tag == "XML") {
            $("#out_result").html('<iframe width="300" height="200" src="./data/books.xml"></iframe>');
        }
        else { $("#out_result").html('<iframe width="300" height="200" src="./data/books.html"></iframe>'); }
    }
</script>

1.4.2 实现效果

加载XML代码如图1.5所示。

图1.5 加载XML代码

加载HTML代码如图1.6所示。

图1.6 加载HTML代码

浏览器解析XML代码如图1.7所示。

图1.7 浏览器解析XML代码

浏览器解析HTML代码如图1.8所示。

图1.8 浏览器解析HTML代码

1.5 问题思考

问题提出：XML与HTML的主要区别是什么？

问题思考：

通过以上实例演示，可发现XML与HTML的主要区别如下表1.3所示。

表1.3 XML与HTML的主要区别
序号	观测维度	主要区别
1	浏览器对标记的解析	浏览器可解析HTML标记；浏览器不可解析XML自定义标记。
2	浏览器对属性的解析	浏览器可解析HTML属性；浏览器不可解析XML自定义属性。
3	浏览器对文本的解析	对标记内部的文本均可解析；浏览器不可解析XML自定义属性值对应的文本。
4	设计目标	XML只关注数据，不关注样式，是标记与数据的混合体，无需关注数据基于浏览器的呈现效果；HTML既关注数据，又关注样式，是标记、数据及样式的混合体，关注数据基于浏览器的呈现效果。

1.6 应用练习