这是 “Firefox 1.5 中的 XML” 系列中的第三篇文章,您将学习在 Mozilla Firefox 中使用
JavaScript 实现处理 XML。在前两篇文章 Firefox 1.5 中的 XML,第 1 部分:XML 特性概述 和 Firefox 1.5 中的 XML,第 2 部分:基本 XML 处理 中,我们了解了 Mozilla
Firefox 中各种与 XML 相关的工具,以及 XML 解析的基本概念、级联样式表(CSS)和 XSLT 样式表调用。
了解了 XML 在 Firefox 浏览器中的基本显示和样式后,下一个要关注的功能就是脚本。本文中,我将展示利用 JavaScript 代码处理 XML
这一基本概念。本文包含的所有代码示例和屏幕截图都是在 Ubuntu Linux® 系统中使用 Firefox 1.5.0.4
创建和测试的,配置文件没有修改过(即没有扩展,保留了安装时的默认选项)。如果要编写用于 XML
处理的跨浏览器代码,可能必须使用其他的浏览器嗅探技术,但是,我没有在本文介绍这些技术。
您可以使用 Web 页面内嵌的 JavaScript 代码加载 XML 文档。我将从一个 HTML Web 页面示例入手,该页面加载一个简单的 XML
邮件列表格式用于动态更新,要加载的 XML 文档如 清单 1
所示(labels.xml)。
<?xml version="1.0" encoding="iso-8859-1"?> |
清单 2 是仅包括一个链接的 HTML 页面,链接显示
“Click here to load addresses”。单击链接,地址标签的信息被添加到页面中。
清单 2. HTML 页面利用 JavaScript 加载 XML 用于动态更新
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
script
元素体现动态特性,定义一个 JavaScript 函数
loadAddresses
,这个函数将被 HTML 中的链接调用。该函数创建一个空文档实例,然后使用
load
函数读入 清单
1(labels.xml)。load
函数是异步执行的,因此,在 XML 文档读入的同时,脚本可跳到下一行执行,使您能够在
XML 加载开始后就使用一个触发函数开始运行。因此,我为一个独立的函数 writeList
设置
onload
属性。该函数使用方便的文档对象模型(Document Object Model, DOM)的
getElementsByTagName
方法遍历标签。如果 XML 文档使用名称空间,那么要使用
getElementsByTagNameNS
表单而不是上面的方法,并将名称空间指定为第一个参数。在下一节中,您将会看到一个这样的例子。在 清单 2 中,只使用 DOM 的基本层(叫做 DOM Level 1)进行 XML
处理。对于支持名称空间的应用程序,需要使用 DOM Level 2,它扩展了许多 Level 1 方法,可以支持名称空间。清单 2 创建了一个表示有序列表的子树,将 HTML
主文档作为工厂(factory)来创建节点。这样,生成的子树可以插入到 HTML 主文档中。清单 2 使用普通模式读取源 XML 树,然后将相应的节点添加到输出 HTML 子树中。
对每个 label
元素执行循环语句 labels[i].childNodes
,查找
name
和 address
子节点。为避免对文本节点的子节点执行操作,使用
nodeType
测试。使用 firstChild.nodeValue
方法进行访问获得
name
元素的子文本。对 address
元素来说,第一个子节点是空格。您不能访问
address
的子节点的任何文本内容。使用 getAttribute
方法可以访问
ID。将收集到的所有文本添加到列表项中。编译完所有的列表项元素之后,使用 appendChild
方法更新包含子树的 HTML
文档。可以使用 updateTarget
ID 标记将添加该子树的元素(body
)。当第一次在
Firefox 中加载该 HTML 时,只能看到如 图 1
所示的链接。
本文转自IBM Developerworks中国