html显示xml源码,在 HTML中显示XML数据的策略

XML的全名是eXtenxible Markup Language(可以延伸或扩展的标记语言)，它的语法类似HTML，都是用标签来描述数据。HTML的标签是固定的，我们只能使用、不能修改；XML则不同，它没有预先定义好的标签可以使用，而是依据设计上的需要，自行定义标签。所以在电子商务的网络时代，用XML来组织数据，再用HTML页面来显示，将是设计网页的新方向。

本文主要对两种在HTML中存贮并显示XML文档数据的策略(数据绑定、DOM)进行探讨。

一、 数据绑定(Data Binding)技术

数据绑定技术适用于结构规则的XML文档，它对XML文档的数据用类似于关系数据库的技术进行处理。

例如，有一个关于产品目录的XML文档(product.xml)结构如下：

……

00001

football

50

……

……

按下面介绍的两个步骤，可将XML文档和HTML文档绑定，并在IE5中显示XML文档的数据。

1． 把一个XML文档连接到一个HTML文档中

方法一：将整个XML文档插入至HTML文档中，其形式如下：

product decription

…… ‘将以上的product.xml文档的内容插入至该处

……

方法二：只将一个对XML文档的引用插入至HTML文档中，其形式如下：

product decription

‘用src指出引用的XML文档源

……

方法二的好处在于：它将XML文档的数据和HTML的显示格式分开，便于用户进行维护。而且，多个HTML文档可以共享一个XML文档。

当IE5打开一个HTML文档时，其内置的XML处理器会读取和分析页面中已连接的XML文档，然后产生一个数据源对象(DSO，全称是Data Source Object)，以便存贮和读取数据。DSO在存贮XML文档中的数据时，会将元素解释成记录和字段的集合，并自动抽取XML元素的数据和处理所有的显示细节。

2．将标准的HTML元素(例如TABLE、SPAN等)和XML元素绑定

方法一：表数据绑定，即将HTML的TABLE元素和XML数据绑定，以便在IE5中用表格的形式一次性地显示整个XML文档的数据。

其形式如下：

……

productid

……

‘显示表格的标题 ‘在表格单元格中显示productid的内容

……

……

方法二：单一记录数据绑定，即将HTML元素(如SPAN、BUTTON或LABEL等非表格元素)和XML文档中的一个单一的字段进行绑定，以便在IE5中一次只显示一条记录的内容。此时，为了浏览方便，最好在页面中增加关于记录的导航按钮。

其形式如下：

……

ProductID ‘显示标题

STYLE=”font-weight:bold”>

‘显示productid的内容

……

if (product.recordset.bof)

product.recordset.movenext()”>

<back;

‘产生一个向前导航的按钮

……

注意：当用数据绑定技术显示XML文档数据时，如果XML元素中有参数，则DSO会将该元素处理成层次型的记录。例如：product.xml文档中的“ PRODUCTNAME ”元素有一个“ Supplier ”参数，则DSO会将该元素处理成下面的形式：

fuller

football$TEXT>

此时，必须用$TEXT作为字段名来读取“ football ”数据，其形式如下：

……

……

二、DOM技术

1．DOM技术的特点

DOM是XML Document Object Model的简称。它是XML文档和HTML文档的接口，其中包含一系列代表XML文档不同部件的程序对象。利用这些对象的属性和方法，并使用脚本语言(如VBScript或JavaScript等)编制成脚本后，就可以在一个HTML页面中显示XML文档的数据。虽然利用DOM技术比数据绑定技术复杂，但它可以处理及显示结构规则或不规则的XML文档中任意部件(如元素、参数、处理指示、注释、实体和标记等)的数据内容，

和数据绑定技术类似，要使用DOM技术，必须首先对XML文档源进行引用：

‘对XML文档源的引用

接着，就可以利用DSO的XMLDocument成员使用DOM：

Document=product.XMLDocument

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心(core)、HTML和XML。核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据。HTML接口和XML接口两部分则是专为操作具体的HTML文档和XML文档而提供的高级接口，它们可以使得对这两类文件的操作更加方便。

当DOM对XML文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树(如图1)。在这棵节点树中，有一个名为Document根节点，所有其他的节点都是根节点的后代节点。DOM实际上是利用对象来把文档模型化，这些模型不仅描述了文档的结构，还定义了模型中对象的行为。换句话说，图1中的节点不是数据结构，而是对象。DOM接口利用对象中包含的方法和属性，就可以访问、修改、添加、删除、创建树中的节点和内容。

在DOM接口规范中，有四个基本的接口：Document，Node，NodeList以及NamedNodeMap。其中，Document接口是对文档进行操作的入口。它是从Node接口继承过来的。Node接口是其他大多数接口的父类，象Documet，Element，Attribute，Text，Comment等接口都是从Node接口继承过来的。NodeList接口是一个节点的集合，它包含了某个节点中的所有子节点。NamedNodeMap接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系，从而利用节点名就可以直接访问特定的节点。

图1

2．利用DOM对XML文档的数据进行处理

(1) 对XML某个元素的数据进行处理

其形式如下：

productid.innerText=DocumentElement.childNodes(0).text; ‘取得productid的数据，并将它赋给HTML SPAN元素的innerText属性

‘显示productid的数据

(2) 对XML文档中同名元素的所有数据进行处理

其形式如下：

Nodelist=Document.getElementsByTagName(“productname”); ‘取得所有productname的数据，并形成一个Nodelist集合

For(i=0;i

ResultHTML+=Nodelist(i).xml+”\n\n”;

ResultDiv.innerText=ResultHTML; ‘用循环语句显示所有productname的数据

(3) 对XML元素的参数数据进行处理

其形式如下：

NamedNodeMap=Document.DocumentElement.childNodes(0).attributes; ‘取得所有product的参数，并形成一个NamedNodeMap集合

For(i=0;i

Alert(NamedNodeMap.getNameItem(i).nodeValue); ‘用循环语句显示所有product参数的数据

如果在参数中包含有实体，则应采用下列形式对XML的实体和实体中的标记进行访问：

Attribute=Document.DocumentElement.childNodes(0).attributes(0); ‘取得product元素的参数

If(attribute.datatype==”entity”) ‘检测参数的类型是否为entity类型

Entity=Document.doctype.entities.getNameItem(attribute.nodeValue); ‘取得XML文档的DTD声明中的某个实体的名字

DisplayText=Entity.attributes.getNameItem(“SYSTEM”).nodeValue; ‘取得该实体中system的源文件数据

NotationName=Entity.attributes.getNameItem(“NDATA”).nodeValue; ‘取得该实体中NDATA标记的名字

三、结束语

目前，有三种途经可以在IE5中显示XML文档的数据：样式单、数据绑定及DOM。样式单的特点是单独设计一个用于处理显示格式的样式单(CSS样式单或XSL样式单)，然后在XML文档中对样式单进行引用；而后面两种技术的特点是利用HTML文档对XML存贮的数据进行显示，这样，可以将XML和HTML相结合，充分利用XML和HTML各自的优点。

参考书目：

(1)Natanya Pirts编. XML轻松进阶.电子工业出版社. 2000年月1月

(2)Jake Sturm编. XML解决方案.北京大学出版社. 2001年4月