浏览器中操作XML文档

浏览器中操作XML文档
1.环境描述
●常见浏览器类型：IE、FireFox、Chrome、Safari、Opera
●XML解析器：浏览器中一般都以插件或本地实现的方式包含了一种XML parser。

●浏览器中操作XML的主要编程语言：JavaScript(ECMAScript)，浏览器都自带了JavaScript
的引擎。

●操作XML的编程接口：JavaScript中实现了DOM的编程接口。

1.1 浏览器内核：
1.1.1 Trident内核(IE 内核)
Trident内核是IE浏览器使用的内核，该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE10。

Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如：360浏览器、Maxthon、The World、TT、GreenBrowser、AvantBrowser等）。

此外，为了方便也有很多人直接简称其为IE内核。

由于IE本身的“垄断性”而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果：一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。

非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

IE浏览器中的JavaScript被称为JScript，虽然早年JScript与人们谈到的JavaScript有着很大的不同，但是随着W3C的WEB标准化进程，JScript与JavaScript的差别越来越少，可以说90%以上都基本相同。

IE 9中使用的JavaScript引擎为Chakra(中译:查克拉)，该引擎在很大程度上改善了IE浏览器对于JavaScript脚本执行性能。

1.1.2 Gecko(FF内核)
Gecko是Netscape 4开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。

事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Geckos。

不过事
实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox 内核。

此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。

FireFox采用使用JavaScript引擎是SpiderMonkey，之后在FireFox 3.5版本开始加入了TraceMonkey引擎作为SpiderMonkey的JavaScript的JIT编译引擎，大大提高了编译效能；而在FireFox 4.0时JägerMonkey引擎也被添加进来与TraceMonkey引擎对JavaScript采取组合编译，直到FireFox 11.0之后TraceMonkey最终被停止使用。

在2013年发布的FireFox 18.0中将IonMonkey引擎作为JavaScript的默认编译引擎。

1.1.3 Webkit内核
Webkit是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。

Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。

所以Webkit也是自由软件，同时开放源代码。

在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。

限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了。

当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。

Mac下还有OmniWeb、Shiira等人气很高的浏览器。

google的chrome、360极速浏览器以及搜狗浏览器高速模式也使用webkit作为内核。

WebKit内核在手机上的应用也十分广泛。

Chrome浏览器采用的JavaScript引擎是由丹麦Google开发的V8。

2.加载XML文档
加载XML文档到内存中构造一棵DOM文档树，这个工作主要由浏览器包含的XML parser解析器完成，这个包含在浏览器中的XML parser必须支持DOM的解析方法。

由于不同浏览器所包含的XML parser方式不尽相同，因此在XML文档加载时，要考虑到不同浏览器之间的兼容性。

2.1本地加载XML文档
2.1.1获取浏览器的XML解析器
2.1.1.1 IE
在IE浏览器中XML解析器是以COM插件对象方式提供的，而不是包含在IE浏览器核
1)老版本的XML解析器获取方法：(msxml v2.0)
varxmlDom = new ActivexObject(“Microsoft.XMLDOM”);
或者
varxmlDom = new ActiveXObject(“Msxml.DOMDocument”);
2)msxml v3.0版本
varxmlDom = new ActiveXObject(“Msxml2.DOMDocument”);
或
varxmlDom = new ActiveXObject(“Msxml2.DOMDocument.3.0”);
3)msxml v4.0版本
varxmlDom = new ActiveXObject(“Msxml2.DOMDocument.4.0”);
4)msxml v5.0版本
varxmlDom = new ActiveXObject(“Msxml2.DOMDocument.5.0”);
5)msxml v6.0版本
varxmlDom = new ActiveXObject(“Msxml2.DOMDocument.6.0”);
msxml v6.0是IE浏览器中最新版本的XML解析器。

2.1.1.2 FireFox、Safari、Opera
以上浏览器对于XML的DOM解析提供了内核实现，因此无需从外部加载控件。

获取XML的DOM解析对象的方法：
document.Implementation
2.1.1.3Chrome
Chrome浏览器出于安全的考虑，无法加载本地的XML文档。

2.1.2加载XML文档
2.1.2.1 IE
●xmlDom.async用来设定下载XML文档时，是否应当被同步处理
⏹设置为true时，在使用load加载XML文档完成之前，会将控制权交回给调用load
的主调程序。

⏹设置为false时，控制权必须在load加载XML文档完成之后，才会交还给主调程序。

●xmlDom.load(xmlFile) 用来加载以URL、文件路径等指定的XML文件。

●xmlDom.loadXML(xmlFile) 用来加载以字符串方式，加载XML文档片段。

2.1.2.2 FireFox、safari、Opera
●createDocument((namespaceURI, qualifiedNameStr, DocumentType)
⏹namespaceURI：为文档创建的根元素的命名空间的唯一标识符。

如果没有命名空
间，则为null。

⏹qualifiedNameStr：为文档创建的根元素的名称。

如果namespaceURI不为null，该
名称应该包括命名空间前缀和冒号。

⏹DocumentType：新创建的Document 对象的DocumentType对象。

如果没有想得到
的DocumentType对象，则为null。

2.1.2.3 兼容IE、FireFox、safari、Opera的加载XML文档
或者
2.2
通过XMLHttpRequest
对象加载服务器端XML 文档
XMLHttpRequest 对象用来向服务器建立连接，定义数据请求，并处理返回数据。

在Firefox 、Opera 、safari 、Chrome 和IE 7以上版本中都实现了XMLHttpRequest 对象。

在IE 7之前的版本需要使用插件方式加载XMLHTTP 对象获得相似功能。

所有浏览器都需要使用HTTP 协议向web 服务器发出数据请求来获取网页内容，因此使用XMLHttpRequest 对象来请求并加载服务器端的XML 文档都是可行的。

XMLHttpRequest 对象是Ajax 的核心技术，已达到异步数据访问和处理的目的。

2.2.1 实例化XMLHttpRequest 对象
而对于IE 7之前的IE 浏览器，则不能使用上述方式实例化XMLHttpRequest 对象，而要使用以下方式进行。

因此为了兼容IE 7以前版本的IE 浏览器，可以采用以下兼容的方式来实例化（虽然IE 已经
①
更新到IE 10了，但不能保证没有网页浏览者可能仍然在使用IE 6）。

或
2.2.2打开一个新的连接
2.2.2.1 方法：XMLHttpRequest.open()
●功能：初始化HTTP请求参数
●参数：open(”method”,”url”[,async,[username,[password]]])
●说明：method和url参数是必须给出的，async、username和password是可选的。

⏹method：HTTP方法，包括GET、POST等，使用时需要加引号包含；
⏹url：是向服务器请求的数据内容定位符；
⏹async：表示请求是异步还是同步的，如果设置为false，则表示同步的，如果省略
或设置为true，则表示是异步请求。

⏹username和password：提供url指向数据的访问授权进行认证。

2.2.2.2 方法：XMLHttpRequest.send()
●功能：发送HTTP请求
●参数：send(body)
●说明：如果open中设置的method参数为POST或PUT时，则body为将提交给服务器
的内容，可以是一个字符串或一个Document对象。

对于open中设置的其他method 参数，则body参数是不可用的，一般设置为null。

2.2.2.3 实例化XMLHttpRequest对象，发送HTTP数据请求
2.2.3处理服务器的响应数据
2.2.
3.1 属性：responseXML
对请求的响应，解析为XML 并作为Document 对象返回。

2.2.
3.2 完整获取Document对象的函数代码
②
3.操作XML文档
经过前面介绍的方法，大家应该能够完成XML文档的加载工作了，但这仅仅只是将XML 文档加载到内存中，构造出一个DOM文档树数据结构对象。

下面我们将根据cd_data.xml来介绍如何将cd_data.xml文档中的数据读取出，并在浏览器中以表格的方式显示出来。

3.1数据：cd_data.xml
3.2获取DOM文档树中数据，并填充到HTML代码中
3.2.1 函数：getConent()
③
1)loadXMLByXMLHTTP函数，是由编号的代码段所定义的。

该函数返回从服务器端返
回的解析的XML文档后得到的Document对象。

orderDoc变量负责接收该函数返回的对象引用。

2)orderDoc.getElementsByTagName(“CD”).length：通过getElementByTagName(“CD”)方法获
取Document对象中所有标签名为“CD”的节点集合，并通过属性length获得该节点集合中节点数量，items负责记载这个节点数量值，以备后面作为循环结束条件使用。

3)变量stringsss用来保存生成的HTML代码段。

4)'<table border="1"><tr><th>CD专辑名</th><th>表演者</th><th>发行公司</th></tr>'：由
于字符串中需要包含双引号，因此该字符串使用单引号包含。

5)循环中唯一一条语句：stringsss += getDataByid(i); 其中getDataByid()是一个我们自定义
的函数，在后面将给出其定义。

这个函数主要是用来获取DOM树中每个CD元素节点的子节点的文本数据，并将数据填充到一段HTML的table记录行中。

6)循环结束后，表示已向table中添加完数据行，需要封闭table元素了，因此在stringsss
字符串最后添加一个字串“</table>”，表示table元素的结束。

7)document.write(stringsss); 此处document表示的是当前浏览器打开的HTML文档对象，
其方法write(stringsss)表示在HTML文档中当前执行getContent()的位置将stringsss的内容动态添加到HTML文档中，并由浏览器解释并显示。

3.2.2 函数：getDataByid()
④
1)参数number接受的是getContent()中获取的CD元素节点集合中节点序号；
2)orderDoc.getElementsByTagName(“TITLE”)[number]，这句用来获取DOM树中所有名为
TITLE的元素节点集合，后面跟随的[number]是用来获取节点集合中序号为number的TITLE元素节点。

因为TITLE元素是CD元素的子元素，因此之前在getContent()中获取的CD节点集的序号为number的CD节点的子节点，可以用number在getDataByid()中获取。

(这种方法可能不是最好的，但是是可行的。

)
3)var std='<tr><td>'+(title)+'</td><td>'+(artist)+'</td><td>'+(company)+'</td></tr>';这句是将
前面获取的CD元素节点的子元素节点的TITLE、ARTIST和COMPANY节点的值添加到table的一行记录的HTML代码中，并由std变量保存。

4)最后getDataByid()返回该std变量。

5)函数isnull()用来判断元素节点是否具有孩子节点，如果有就将孩子节点的值返回。

（这
个方法也不是最好的，因为这是基于我们已经知道传给isnull()的元素节点，不再包含子元素节点，而包含的是文本子节点。

）
3.2.3 函数：isnull()
⑤
1)childNodes表示obj的子节点集合，[0]表示该子节点集合中的第一个子节点。

2)nodeValue表示节点的值。

4．代码测试
4.1 HTML文件：loadxml.html
4.2 JS文件：myjs.js
将前面标号为的几段JavaScript代码添加到该文件中。

4.3 测试环境搭建
4.3.1 通过XAMPP安装完成测试环境搭建
可以通过/lk/Q8XT2n5WBdk79下载XAMPP，安装后将获得下图中所示的网络服务：
请大家安装前注意，在安装配置时，请取消安装那些你系统中已经安装过的服务，或者你也可以将原来安装的服务系统卸载，然后再用XAMPP进行安装。

上图中MySQL后面的服务配置按钮都是灰的，就是因为我的系统中事先已经安装了MySQL，所以在使用XAMPP安装时，我取消了安装MySQL。

安装成功后，打开XAMPP控制窗口，也就是上图，查看一下你需要的服务是否已经启动。

上图中显示的只启动了Apache服务器，其他的服务都是出于停止状态。

XAMPP默认的安装目录在C:\xampp下。

如果要查看服务是否安装成功。

可以在浏览器地址栏中输入127.0.0.1或localhost，如果看到下图显示的结果，就表示Apache服务安装成功。

4.3.2 测试Javascript加载远程XML文档
将loadxml.html、myjs.js和cd_data.xml一起拷贝到C:\xampp\htdocs\目录中，然后通过在浏览器中输入127.0.0.1/loadxml.html，可以得到下图所示结果：
FireFox：
Chrome：
IE 10：
Opera：
4.3.3 页面美化
对myjs.js中的代码段的修改：
对myjs.js中的代码段的修改：
将以上修改过的文件保存，然后再在浏览器中输入127.0.0.1/loadxml.html，将会得到如下图所示的结果：。