浏览器中操作XML文档.doc

浏览器中操作XML文档1. 环境描述l 常见浏览器类型：IE、FireFox、Chrome、Safari、Operal XML解析器：浏览器中一般都以插件或本地实现的方式包含了一种XML parser。l 浏览器中操作XML的主要编程语言：JavaScript(ECMAScript)，浏览器都自带了JavaScript的引擎。l 操作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时JgerMonkey引擎也被添加进来与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解析器 IE在IE浏览器中XML解析器是以COM插件对象方式提供的，而不是包含在IE浏览器核心之中的。因此需要使用ActivexObject进行构造实例化解析器的Automation对象实例。说明：COM对象支持IUnknown接口，Automation对象支持IUnknown以及IDispatah双接口。COM对象必须显示的调用。而自动化对象可以隐式的调用。1) 老版本的XML解析器获取方法：(msxml v2.0)var xmlDom = new ActivexObject(“Microsoft.XMLDOM”);或者var xmlDom = new ActiveXObject(“Msxml.DOMDocument”);2) msxml v3.0版本var xmlDom = new ActiveXObject(“Msxml2.DOMDocument”);或var xmlDom = new ActiveXObject(“Msxml2.DOMDocument.3.0”);3) msxml v4.0版本var xmlDom = new ActiveXObject(“Msxml2.DOMDocument.4.0”);4) msxml v5.0版本var xmlDom = new ActiveXObject(“Msxml2.DOMDocument.5.0”);5) msxml v6.0版本var xmlDom = new ActiveXObject(“Msxml2.DOMDocument.6.0”);msxml v6.0是IE浏览器中最新版本的XML解析器。 FireFox、Safari、Opera以上浏览器对于XML的DOM解析提供了内核实现，因此无需从外部加载控件。获取XML的DOM解析对象的方法：document.Implementation ChromeChrome浏览器出于安全的考虑，无法加载本地的XML文档。2.1.2 加载XML文档 IE或l xmlDom.async 用来设定下载XML文档时，是否应当被同步处理n 设置为true时，在使用load加载XML文档完成之前，会将控制权交回给调用load的主调程序。n 设置为false时，控制权必须在load加载XML文档完成之后，才会交还给主调程序。l xmlDom.load(xmlFile) 用来加载以URL、文件路径等指定的XML文件。l xmlDom.loadXML(xmlFile) 用来加载以字符串方式，加载XML文档片段。 FireFox、safari、Operal document.implementation是FireFox实现的DOM解析对象。l createDocument(namespaceURI, qualifiedNameStr, DocumentType)n namespaceURI：为文档创建的根元素的命名空间的唯一标识符。如果没有命名空间，则为 null。n qualifiedNameStr：为文档创建的根元素的名称。如果 namespaceURI 不为 null，该名称应该包括命名空间前缀和冒号。n DocumentType：新创建的 Document 对象的 DocumentType 对象。如果没有想得到的 DocumentType 对象，则为 null。 兼容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 打开一个新的连接 方法：XMLHttpRequest.open()l 功能：初始化HTTP请求参数l 参数：open(”method”,”url”,async,username,password)l 说明：method和url参数是必须给出的，async、username和password是可选的。n method：HTTP方法，包括GET、POST等，使用时需要加引号包含；n url：是向服务器请求的数据内容定位符；n async：表示请求是异步还是同步的，如果设置为false，则表示同步的，如果省略或设置为true，则表示是异步请求。n username和password：提供url指向数据的访问授权进行认证。 方法：XMLHttpRequest.send()l 功能：发送HTTP请求l 参数：send(body)l 说明：如果open中设置的method参数为POST或PUT时，则body为将提交给服务器的内容，可以是一个字符串或一个Document对象。对于open中设置的其他method参数，则body参数是不可用的，一般设置为null。 实例化XMLHttpRequest对象，发送HTTP数据请求2.2.3 处理服务器的响应数据 属性：responseXML对请求的响应，解析为XML 并作为 Document 对象返回。 完整获取Document对象的函数代码3. 操作XML文档经过前面介绍的方法，大家应该能够完成XML文档的加载工作了，但这仅仅只是将XML文档加载到内存中，构造出一个DOM文档树数据结构对象。下面我们将根据cd_data.xml来介绍如何将cd_data.xml文档中的数据读取出，并在浏览器中以表格的方式显示出来。3.1 数据：cd_data.xmlEmpire BurlesqueBob DylanUSAColumbia10.901985Hide your heartBonnie TylerUKCBS Records9.901988Greatest HitsDolly PartonUSARCA9.901982Still got the bluesGary MooreUKVirgin records10.201990ErosEros RamazzottiEUBMG9.9019973.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) CD专辑名表演者发行公司：由于字符串中需要包含双引号，因此该字符串使用单引号包含。5) 循环中唯一一条语句：stringsss += getDataByid(i); 其中getDataByid()是一个我们自定义的函数，在后面将给出其定义。这个函数主要是用来获取DOM树中每个CD元素节点的子节点的文本数据，并将数据填充到一段HTML的table记录行中。6) 循环结束后，表示已向table中添加完数据行，需要封闭table元素了，因此在stringsss字符串最后添加一个字串“”，表示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=+(title)+(artist)+(company)+; 这句是将前面获取的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文件：lo