JavaScript高级程序设计与应用实例-浏览器中的XML-DOM.doc

JavaScript高级程序设计与应用实例 8.1浏览器中的XML DOM 当前章节:8.1浏览器中的XML DOM7.1样式编程基础7.2样式编程应用示例7.3小结8.2浏览器中的XPath8.3浏览器中的XSLT8.4XML编程应用示例XML是绝大多数软件开发领域都在应用的一种编程语言。主流的浏览器（例如Internet Explorer和Mozilla）已经提供了对XML相关特性的支持，Web开发人员可以在客户端使用JavaScript进行XML数据的处理。浏览器支持的XML特性包括XML DOM、XPath和XSLT，Internet Explorer和Mozilla对这些特性的支持方式各有不同，本章将分别介绍它们的使用方法。8.1 浏览器中的XML DOM8.1.1 IE中的XML DOMIE中对于XML相关特性的支持是通过MSXML库的ActiveX控件实现的，使用IE 4.0以及更低版本IE的客户端必须安装MSXML库才能使用XML编程相关的功能，IE 5.0及更高版本的IE则集成了MSXML库，并将其中的ActiveX控件设置为安全控件，使之不受浏览器安全性设置的影响。当然，基于ActiveX的解决方案决定了IE中的XML相关特性只能运行在Windows平台之上。1创建XML文档对象MSXML库存在多个版本，目前最新的版本是6.0。如果客户端安装了多个版本的MSXML库，通常的策略是尽可能地使用最新的版本，从而获取更高的执行效率和稳定性。使用下面的createDocument函数可以满足要求，它将依次尝试创建以下版本的ActiveX控件，直到创建成功为止，如果createDocument函数返回false，说明客户端未安装MSXML或者浏览器不是Windows平台的IE（Mac平台的IE不支持ActiveX控件）。以下列出了各种版本MSXML库的DOM对象注册名。 MSXML2.DOMDocument.6.0 MSXML2.DOMDocument.5.0 MSXML2.DOMDocument.4.0 MSXML2.DOMDocument.3.0 MSXML2.DOMDocument Microsoft.DOMDocument/* 该对象引自Prototype框架 */var Try = these: function() var returnValue; / 尝试调用参数中指定的函数 for (var i = 0, length = arguments.length; i length; i+) var lambda = argumentsi; try returnValue = lambda(); break; catch (e) return returnValue; ;/ 创建DOM对象function createDocument() / 依次从高到底选择版本，创建DOM对象 return Try.these( function () return new ActiveXObject(MSXML2.DOMDocument.6.0);, function () return new ActiveXObject(MSXML2.DOMDocument.5.0);, function () return new ActiveXObject(MSXML2.DOMDocument.4.0);, function () return new ActiveXObject(MSXML2.DOMDocument.3.0);, function () return new ActiveXObject(MSXML2.DOMDocument);, function () return new ActiveXObject(Microsoft.DOMDocument); ) | false;2加载XML文档使用MSXML的DOMDocument对象加载XML文档的方法为：使用load方法加载一个指定的URL，或者使用loadXML方法加载XML格式的字符串。通过load方法加载XML文档一般分为同步和异步两种模式，首先来看使用同步模式加载XML文档的代码。/ 创建DOMDocument对象var doc = createDocument();/ 设置为同步模式doc.async = false;/ 加载XMLdoc.load(books.xml);在同步模式下需要将DOMDocument对象的async属性设置为false，这样通过该对象的load方法加载XML时，程序会一直等待直到XML文档加载完成。一般来说，XML位于服务器端并且其数据大多数是动态产生的，因此加载过程必然会存在一定的延时。使用同步模式往往导致浏览器在等待XML数据返回的过程中失去响应，因此在大多数情况下建议使用异步模式，这也是DOMDocument对象默认的文档加载方法。以下是使用异步模式加载XML文档的示例代码。/ 创建DOMDocument对象var doc = createDocument();/ DOMDocument对象的async属性默认为false，这一步不是必需的doc.async = true;/ 设置onreadystatechange事件处理函数doc.onreadystatechange = function() alert(doc.readyState);/ 加载XML文档doc.load(books.xml);使用异步模式加载XML文档时，load方法将向指定的XML发出请求，但是不会等待结果返回便继续执行。当DOMDocument对象的就绪状态发生改变时，DOMDocument对象的onreadystatechange事件处理函数将被执行。在异步模式下加载XML文档不会导致浏览器失去响应，但相应的处理逻辑要复杂一些，需要在onreadystatechange事件处理函数中对XML文档做进一步的处理。XML加载的过程中DOMDocument对象会经历4种状态，通过其readyState属性值可以判断当前所处的状态。这4种状态及其含义如下：（1）正在加载数据；（2）已经完成持久化属性的读取，但对象模型仍不可用；（3）已经完成一些数据的读取和解析，对象模型可用，但处于只读状态；（4）加载XML文档的过程已完全结束（结果可能是成功的，也有可能失败）。创建DOMDocument对象之后，其readyState属性值为4，加载XML文档的过程中readyState会依次经历以上4种状态，每次状态的改变都会触发onreadystatechange事件，因此在前面给出的异步加载XML文档的示例代码在运行时会依次输出“1”、“2”、“3”和“4”。在实际开发中，最常见的使用方式是在readyState为4（即XML文件完全加载时）进行后续的XML文档处理。/ 创建DOMDocument对象var doc = createDocument();/ DOMDocument对象的async属性默认为false，这一步不是必需的doc.async = true;/ 设置onreadystatechange事件处理函数doc.onreadystatechange = function() if (doc.readyState = 4) / 后续XML数据处理 handleComplete(doc); / 加载XML文档doc.load(books.xml);3访问XML节点DOMDocument对象实现了DOM标准中的Document接口，因此可以将其当作标准的DOM对象来使用，DOMDocument对象的常用属性如表8-1所示。表8-1 DOMDocument对象常用属性属 性 名 称含 义attributes所有属性节点的列表childNodes所有的子节点firstChild第一个子节点lastChild最后一个子节点previousSibling上一个兄弟节点nextSibling下一个兄弟节点parentNode父节点documentElement文档的根节点nodeName节点名称nodeType节点类型nodeValue节点值ownerDocument节点所在的文档对象text节点的文本内容xml节点的XML文本其中text和xml两个属性是微软对DOM标准的扩展，分别用于返回节点的文本内容和XML文本。下面将以books.xml为例说明在IE浏览器中访问XML文档相关节点的方法。books.xml的内容如下。?xml version=1.0 encoding=UTF-8?Books Book TitleAjax In Action/Title AuthorDave Crane/Author /Book Book TitleProfessional Ajax/Title AuthorNicholas C.Zakas/Author /Book/Books以下的代码是handleComplete函数中的一部分，它们使用了表8-1中的部分属性访问books.xml的相关节点。 通过documentElement属性获取文档的根节点Books。var root = doc.documentElement; / doc为handleComplete函数的输入参数，即XML文档对象 根节点具有两个子节点，通过其childNodes属性可以进行判断。alert(root.childNodes.length); / 输出2 找到第1个Book节点，并且输出其xml属性值。var firstBook = root.childNodes0;alert(firstBook.xml);/ 输出第1个Book节点的内容Book TitleAjax In Action/Title AuthorDave Crane/Author/Book 通过nextSibling属性获取第2个Book节点，并且输出其xml属性值。var secondBook = firstBook.nextSibling;alert(secondBook.xml);/ 输出第2个Book节点的内容Book TitleProfessional Ajax/Title AuthorNicholas C.Zakas/Author/Book 通过secondBook对象的previousSibling属性获取第1个Book节点，它与firstBook对象是全等的。alert(secondBook.previousSibling = firstBook); / 输出true firstBook和secondBook的父节点都是root，因此以下的代码均输出true。alert(firstBook.parentNode = root); / 输出truealert(secondBook.parentNode = root); / 输出true root、firstBook和secondBook节点所属的文档对象都是doc，因此以下的代码均输出true。alert(root.ownerDocument = doc); / 输出truealert(firstBook.ownerDocument = doc); / 输出truealert(secondBook.ownerDocument = doc); / 输出true除了通过表8-1中的属性访问XML节点之外，还可以使用标准的DOM方法操纵XML文档中的节点，微软也对DOM方法进行了一些扩展，相关的方法如表8-2所示。表8-2 DOMDocument对象常用方法方 法 名 称含 义appendChild将节点作为最后一个子节点附加到父节点中cloneNode创建节点的副本createAttribute创建属性节点createCDATASection创建CDATA节点createComment创建注释节点createDocumentFragment创建文档片段createElement创建元素节点createEntityReference创建实体引用节点createNode根据指定的名称、类型和命名空间创建节点createProcessingInstruction创建处理指令节点createTextNode创建文本节点getElementsByTagName根据指定的节点名称返回元素的集合hasChildNodes判断节点是否具有子节点insertBefore将节点插入到指定的子节点之前nodeFromID根据ID返回指定的节点removeChild删除指定的子节点replaceChild替换指定的子节点save将XML文档保存到指定的位置4异常处理在加载XML文档的过程中可能会由于各种原因产生异常，最常见的情况是XML格式不正确（例如以下代码中加载的XML字符串不是合法的XML）。var doc = createDocument();doc.loadXML(rootroot); / 不合法的XML格式DOMDocument提供了parseError对象用于异常处理，该对象具有的属性参见表8-3。表8-3 parseError对象属性属 性 名 称含 义errorCode错误码，errorCode不等于零说明有异常发生filepos引发异常的代码在文件中所处的绝对位置lineXML文档中错误所在的行号lineposXML文档中错误在行内的位置reason导致异常的原因srcTextXML文档中错误所在行的文本内容urlXML文档的URL一般情况下，异常的判断和处理方式如下。var doc = createDocument();doc.loadXML(rootroot); / 不合法的XML格式if (doc.parseError.errorCode = 0) / 没有发生异常，正常处理 else / 发生异常，提示异常信息 alert(加载XML时发生异常，错误码： + doc.parseError.errorCode + ，导致异常的原因： + doc.parseError.reason);8.1.2 Mozilla中的XML DOMMozilla浏览器将XML DOM作为其JavaScript实现的一部分，因此Mozilla浏览器中的XML相关功能具备了跨平台的能力，可以运行在各种操作系统平台，而微软的MSXML库只能在Windows平台上运行。1创建XML文档对象在Mozilla浏览器中创建XML文档对象的方法如下。document.implementation.createDocument(namespaceURI, rootname, doctype)其中namespaceURI参数代表XML文档的命名空间URI，rootname参数代表根节点名称，而doctype表示创建文档的类型。目前Mozilla并没有实现对该参数的支持，因此在实际使用时doctype的赋值为null。如果namespaceURI和rootname参数为空字符串，那么createDocument方法将创建一个空DOM对象，即：var doc = document.implementation.createDocument(, , null);2加载XML文档在Mozilla中也可以使用load方法加载指定URL的XML文档，DOM对象同样具有async属性，该属性的默认值为true，即默认情况下它采用异步加载模式。如果需要采取同步的模式加载XML文档，那么必须将DOM对象的async属性设置为false。Mozilla不支持IE中的onreadystatechange事件，也不存在readyState属性从1到4的变化过程。当文档加载完成之后，DOM对象将被触发load事件，通常在load事件的处理函数中进行XML文档的处理，以下给出了相关的示例代码。var doc = document.implementation.createDocument(, , null);doc.load(books.xml);doc.onload = function() / 加载XML完成;在Mozilla中可以通过加载XML字符串的方式加载XML文档。Mozilla不支持IE中的loadXML方法，它是通过DOMParser对象加载XML字符串生成DOM对象的，以下是在Mozilla中通过字符串方式加载XML文档的示例。/ XML字符串var xmlString = BooksBookTitleAjax In Action/Title AuthorDave Crane/Author/BookBookTitle Professional Ajax/TitleAuthorNicholas C.Zakas/Author /Book/Books;/ 创建DOMParser对象var parser = new DOMParser();/ 解析字符串，创建DOM对象var doc = parser.parseFromString(xmlString, text/xml);3访问XML节点Mozilla中的DOM对象支持所有标准的DOM属性和方法，因此它支持表8-1和表8-2中列举的绝大多数属性和方法，使用方式是一致的，这里不再重复。需要特别说明的是，text和xml两个属性是微软对DOM标准的扩展，Mozilla浏览器不支持它们，但是可以通过其他的方式实现类似的功能。以下的getText方法将会返回节点中的文本内容，该方法通过递归方式遍历了节点的所有叶子节点。在Mozilla中需要特别注意的问题是空白文本节点也会被遍历，这里需要将nodeValue（节点值）使用trim函数进行处理。/ 删除字符串两端的空白字符Stotype.trim = function() return this.replace(/s+|s+$/gi, );/ 获取XML节点中文本function getText(node) / 保存文本内容的字符串 var s = ; / 遍历所有子节点 for (var i = 0;i node.childNodes.length;i+) if (node.childNodesi.hasChildNodes() / 如果该子节点还有子节点，递归调用getText方法 s += getText(node.childNodesi); else / 将节点值加入XML字符串，考虑到Mozilla中将 / 所有空白字符串均作为普通节点，这里删除所有的空白文本 s += node.childNodesi.nodeValue.trim(); return s;在Mozilla中获取节点的XML字符串可以使用XMLSerializer对象，以下的getXml函数将会返回节点的XML字符串。function getXml(node) / 创建XMLSerializer对象 var serializer = new XMLSerializer(); / 返回节点的XML字符串 return serializer.serializeToString(node);4异常处理Mozilla对于XML异常处理的方式与IE不同，当异常发生时，它会通过DOM对象加载一个包含错误信息的XML文档。例如将books.xml稍作修改，使其格式不正确。?xml version=1.0 encoding=UTF-8?aaBooks Book TitleAjax In Action/Title AuthorDave Crane/Author /Book Book TitleProfessional Ajax/Title AuthorNicholas C.Zakas/Author /Book/Books此时加载books.xml，将返回一个包含错误信息的XML DOM对象，其内容如下。?xml version=1.0 encoding=UTF-8?parsererror xmlns=/newlayout/xml/parsererror.xml XML解析错误：未组织好位置：http:/localhost:1141/ex/books.xml 行：2，列：3 sourcetext aalt;Booksgt;- /sourcetext/parsererror解析包含错误信息的DOM对象即可获取错误的原因、位置等信息。8.2 浏览器中的XPathXPath是一种用于查询XML文档中某些特定元素的语言，其最初的目的是为XSLT提供一种在XML文档中查找元素的方法，但是它很快就被开发人员用来在XML文档中实现通用的节点查询功能。下面将分别讨论在IE和Mozilla中如何实现XPath查询。8.2.1 IE中的XPath在IE中使用XPath非常简单，直接使用selectNodes或者selectSingleNode方法即可进行XPath查询。考虑以下的XML文档。?xml version=1.0 encoding=UTF-8?Books Book TitleAjax In Action/Title AuthorDave Crane/Author /Book Book TitleProfessional Ajax/Title AuthorNicholas C.Zakas/Author /Book/Books通过下面的代码可以查询所有的Book节点。/ XPath：Books/Book，表示所有Books节点下的Book节点var nodesBook = doc.selectNodes(Books/Book);/ 输出Book节点的个数2alert(nodesBook.length);在很多情况下，我们只需要获取第一个满足条件的节点即可，这时selectSingleNode方法就可以满足这样的需求，例如：/ 第1个Book节点var firstBook = doc.selectSingleNode(Books/Book);/ 输出节点的XML内容alert(firstBook.xml);/ 输出内容为：Book TitleAjax In Action/Title AuthorDave Crane/Author/Book8.2.2 Mozilla中的XPath与IE中的XPath相比，使用Mozilla中的XPath要复杂得多，但是它实现的功能更加强大。在Mozilla中进行XPath查询，需要了解两个关键的对象XPathEvaluator和XPathResult，它们分别用于执行XPath查询和保存查询结果。XPathEvaluator使用evaluate方法进行XPath查询，其方法定义如下。evaluate(String expression , Node contextNode, XPathNSResolver resolver, short type, nsISupports result)evaluate方法具有5个参数，其参数含义如下。 expression：XPath表达式。 contextNode：上下文节点，evaluate方法将在其内部进行查询。 resolver：命名空间解释函数，当XPath中存在命名空间时，需要指定该参数进行命名空间的解释。 type：结果类型，有10种不同的结果类型，分别对应于XPathResult对象中定义的10个常数。 result：该参数可以是一个存在的XPathResult对象，用于保存XPath查询的结果；也可以是null，evaluate方法将新建一个XPathResult对象来保存结果。首先来看一个简单的示例，在前面用到的books.xml中查询所有的Book节点。第一步创建一个XPathEvaluator对象。var xpe = new XPathEvaluator();然后，调用evaluate方法获取元素的迭代器。var iterator = xpe.evaluate(Books/Book, doc, null, XPathResult.ANY_TYPE, null);最终遍历所有的Book节点，输出其XML字符串。var node;/ 通过迭代器遍历所有满足条件的节点while (node = iterator.iterateNext() / 输出node节点的XML字符串 alert(getXml(node);以上的示例中调用evaluate方法时使用的type参数是XPathResult.ANY_TYPE，它代表的含义是，结果集会包含XPath查询获得的任何类型的结果。如果只需获取第1个元素，即模仿IE中selectSingleNode方法的行为，则需要将type参数设置为XPathResult.FIRST_ORDERED_NODE_TYPE，相关代码如下。/ 创建XPathEvaluator对象var xpe = new XPathEvaluator();/ 查询Book节点var iterator = xpe.evaluate(Books/Book, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);/ 获取查询结果var node = iterator.singleNodeValue;/ 输出节点的XML字符串alert(getXml(node);除了以上两种常用的类型之外，type参数还支持其他8种类型，表8-4列出了它们的常数定义和具体含义。表8-4 XPath结果集类型定义常 数值含 义ANY_TYPE0结果集包含XPath查询获取的任何类型的节点，注意当结果集为DOM节点集合时，ANY_TYPE 相当于UNORDERED_ NODE_ITERATOR_TYPENUMBER_TYPE1结果集为单个数字时使用该类型，例如使用count函数的XPath表达式续表常 数值含 义STRING_TYPE2结果集为单个字符串时使用该类型BOOLEAN_TYPE3结果集为单个布尔值时使用该类型，例如使用not函数的XPath表达式UNORDERED_NODE_ITERATOR_TYPE4结果集为DOM节点集合，节点在结果集中出现的顺序不一定和它们在XML文档中的顺序一致ORDERED_NODE_ITERATOR_TYPE5结果集为DOM节点集合，节点在结果集中出现的顺序和它们在XML文档中的顺序一致UNORDERED_NODE_SNAPSHOT_TYPE6结果集为DOM节点集合的快照（即在执行evaluate方法之后该集合的内容不会因XML文档中节点的变化而变化），节点在结果集中出现的顺序不一定和它们在XML文档中的顺序一致ORDERED_NODE_SNAPSHOT_TYPE7结果集为DOM节点集合的快照，节点在结果集中出现的顺序和它们在XML文档中的顺序一致ANY_UNORDERED_NODE_TYPE8如果存在与XPath匹配的节点，结果集中仅包含一个DOM节点，该节点不一定是第一个符合条件的节点FIRST_ORDERED_NODE_TYPE9如果存在与XPath匹配的节点，结果集中仅包含一个DOM节点，它是第一个符合条件的节点对于具有命名空间的XML文档，进行XPath查询时必须指定resolver参数，用于解释命名空间的URI。为books.xml增加命名空间的定义，改名为books_ns.xml。?xml version=1.0 encoding=UTF-8?Books xmlns:pub= xmlns:author= pub:Book TitleAjax In Action/Title author:AuthorDave Crane/author:Author /pub:Book pub:Book TitleProfessional Ajax/Title author:AuthorNicholas C.Zakas/author:Author /pub:Book/Books定义nsResolver函数如下，其作用是根据输入的prefix参数返回相应的命名空间URI字符串。function nsResolver(prefix) / 命名空间的名称/URI对 var ns = pub: , author: ; / 根据命名空间的前缀返回其URI return nsprefix | null;在books_ns.xml中查询所有Author节点的XPath表达式为：/Books/pub:Book/author:Author进行XPath查询的代码如下。/ 创建XPathEvaluator对象var xpe = new XPathEvaluator();/ 查询Author节点var iterator = xpe.evaluate(/Books/pub:Book/author:Author, doc, nsResolver, XPathResult.ANY_TYPE, null);/ 获取查询结果var node;while (node = iterator.iterateNext() / 输出节点的XML字符串 alert(getXml(node);通过以上的讲解，读者可以发现，在Mozilla中进行XPath查询要比在IE中复杂得多，但是Mozilla给与开发人员更多的自由度，从而能够实现更强大的XPath查询功能。8.3 浏览器中的XSLTXSLT是可以将XML文档转换为其他文本格式（包括普通文本、XML、HTML甚至高级语言的代码等）的语言。目前最常见的XSLT应用是将XML格式的数据转换为HTML页面代码，从而实现数据与显示的分离。本节将讨论如何在浏览器中使用XSLT转换。由于IE和Mozilla浏览器采用了不同的方式实现XSLT转换，本节将分别进行讲解。8.3.1 IE中的XSLTIE中实现XSLT转换仍然是依靠MSXML库中的ActiveX控件，根据实际应用的需要，可以选择不同的方式进行XSLT转换。首先列出将要进行XSLT转换的XML文档（books.xml）和XSL样式表（books.xsl）的代码。/* books.xml */?xml version=1.0 encoding=UTF-8?Books xmlns:sww= Book TitleAjax In Action/Title AuthorDave Crane/Author /Book Book TitleProfessional Ajax/Title AuthorNicholas C.Zakas/Author /Book/Books/* books.xsl */?xml version=1.0 encoding=UTF-8?xsl:stylesheet version=1.0 xmlns:xsl=/1999/XSL/Transform xmlns:fo=/1999/XSL/Format xsl:output method=html/ xsl:template match=/ xsl:for-each select=/Books/Book ul li xsl:value-of select=Title/ /li li xsl:value-of select=Author/ /li /ul /xsl:for-each /xsl:template/xsl:stylesheet1基于DOMDocument的XSLT转换在IE中实现XSLT转换的最简单的方式是通过DOMDocument对象的transformNode方法，具体步骤是：首先分别加载XML文档和XSL样式表，然后调用DOMDocument对象的transformNode方法，该方法的输入参数是与XSL样式表对应DOMDocument对象。下面是具体的实现代码。function testXSL() / 创建DOMDocument对象，并且加载XML文档 var xmlDom = createDocument(); xmlDom.async = false; xmlDom.load(books.xml); / 创建DOMDocument对象，并且加载XSL样式表 var xslDom = createDocument(); xslDom.async = false; xslDom.load(books.xsl); / 将XSLT转换的结果输出到id为“out”的div中 $(out).innerHTML = xmlDom.transformNode(xslDom);function $(element) if (typeof element = string) Return document.getElementById(element); else return element;2基于XSLTemplate的XSLT转换在IE中还可以使用XSLTemplate对象进行XSLT转换，要实现以上同样的功能，具体的步骤如下。 创建DOM对象并且加载XML文档。 创建DOM对象并且加载XSL样式表。需要特别注意的是，为了在XSLTemplate对象中使用样式表，必须创建线程安全的DOM对象，它对应于MSXML库中的另一个ActiveX控件。 创建XSLTemplate对象，并且将其stylesheet属性设置为XSL样式表的DOM对象。 通过XSLTemplate对象创建XSLProcessor对象，并且将其input属性设置为XML文档的DOM对象。 调用XSLProcessor对象的transform方法执行XSLT转换。具体的实现代码如下所示。/ 创建线程安全的DOM对象function createFreeThreadedDocument() return Try.these( function () return new ActiveXObject(Msxml2.FreeThreadedDOMDocument.6.0); , function () return new ActiveXObject(Msxml2.FreeThreadedDOMDocument.5.0); , function () return new ActiveXObject(Msxml2.FreeThreadedDOMDocument.4.0); , function () return new ActiveXObject(Msxml2.FreeThreadedDOMDocument.3.0); , function () return new ActiveXObject(Msxml2.FreeThreadedDOMDocument); ) | false;/ 创建XSLTemplate对象function createXSLTemplate() return Try.these( function () return new ActiveXObject(Msxml2.XSLTemplate.6.0);, function () return new ActiveXObject(Msxml2.XSLTemplate.5.0);,