用jQuery 处理XML--浏览器中的XML与JavaScript
来自IBM Developer Works
浏览器中的XML与JavaScript
在处理XML前，你需要在JavaScript中获取它。这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理。
XML的节点类型
在我们研究如何处理XML前，先来了解下XML中不同的节点及类型。如果是HTML，了解这些节点就没必要了，但由于XML的可扩展性和结构的不确定性，了解这些固有节点类型就显得犹为重要了。
下面是XML 中12种不同的节点（表格取自W3School中文站点）：
|
节点类型 |
描述 |
|
Document |
表示整个文档（DOM 树的根节点） |
|
DocumentFragment |
表示轻量级的 Document 对象，其中容纳了一部分文档。 |
|
DocumentType |
向为文档定义的实体提供接口。 |
|
ProcessingInstruction |
表示处理指令。 |
|
EntityReference |
表示实体引用元素。 |
|
Element |
表示 element（元素）元素 |
|
Attr |
表示属性。 |
|
Text |
表示元素或属性中的文本内容。 |
|
CDATASection |
表示文档中的 CDATA 区段（文本不会被解析器解析） |
|
Comment |
表示注释。 |
|
Entity |
表示实体。 |
|
Notation |
表示在 DTD 中声明的符号。 |
妳可以使用JavaScript来获取一个节点并检查它的类型。清单13中的代码返回真如果传入的节点类型为Comment，否则返回假。这里的代码还不涉及jQuery，但在后面探索XML的节点值的时候会用到。
Listing 13. JavaScript function for determining if the node element is a comment
|
<script type="text/javascript"> function isNodeComment(node){ return (node.nodeType===8); } </script> |
这里并不对每个节点类型做具体介绍，但熟悉这些节点对于处理它和它其中的值至关重要。
在客户端用JavaScript处理XML
之前例子中用来处理HTML的代码大部分都可以直接拿来处理XML；需要注意的一点是，XML中不能依赖id属性来处理一个节点了，需要使用节点名字这种更通俗的方法来进行。另外，在进行XML处理时，节点名字的大小是敏感的。
假设我们要处理的XML如下面清单14这个样子。
Listing 14. A simple XML file
|
<?xml version="1.0" encoding="UTF-8" ?> <item content_id="1" date_published="2010-05-25"> <description></description> <body></body> <related_items> <related_item content_id="2"></related_item> <related_item content_id="3"></related_item> </related_items> </item> |
在JavaScript中获取XML
要处理清单14中的XML，首先要做的事情就是在JavaScript中取得它。有很多方法可以做到这点：
- 在服务器端将XML转成字符串类型传到JavaScript
- 在服务器端将XML 与一个textarea 控件进行绑定
- 通过Ajax将XML装载进浏览器
每种方法的详细步骤如下：
- 在服务器端将XML转成字符串类型传到JavaScript
通过一种服务器端编程语言，可以将XML 转成字符串放到一个JavaScript变量中。这种方法不是最优雅也不是最特别的，但它确实有用。但这种方法有个优点就是妳可以从任何地方加载XML文件，甚至是本地服务器（见清单15）。
Listing 15. Writing XML into a JavaScript variable from PHP
|
<?php $xmlPath = "/path/to/file.xml"; // or http://www.somedomain.com/path/to/file.xml $xmlFile = file_get_contents($xmlPath); ?> <script type="text/javascript"> var xmlString = "<?=$xmlFile?>"; </script> |
- 在服务器端将XML 与一个textarea 控件进行绑定
另外一种稍微有点区别的方法是将XML装载进一个<textarea> (这个元素可以不在展示)。然后通过之前提到过的innerHTML 来获取XML 字符串然后放到JavaScript中。
妳可以把这个包含了XML的PHP变量放到一个id为"xml"的<textarea>标签中，之后可以通过这个id方便地获取它：
<textarea id="xml"><?=$xmlFile?></textarea>
然后就可以方便地将XML从这个HTML元素中取出来放到JavaScript中进行操作了（见清单16）。
Listing 16. Exposing XML to JavaScript from a textarea element
|
<script type="text/javascript"> var xmlString = document.getElementById("xml").innerHTML; </script> |
考虑浏览器兼容性，使用清单17中的方法来从XML字符串创建DOM。
Listing 17. Cross-browser JavaScript function for converting an XML string into a DOM object
|
<script type="text/javascript"> /** * Converts passed XML string into a DOM element. * @param xmlStr {String} */ function getXmlDOMFromString(xmlStr){ if (window.ActiveXObject && window.GetObject) { // for Internet Explorer var dom = new ActiveXObject('Microsoft.XMLDOM'); dom.loadXML(xmlStr); return dom; } if (window.DOMParser){ // for other browsers return new DOMParser().parseFromString(xmlStr,'text/xml'); } throw new Error( 'No XML parser available' ); }
var xmlString = document.getElementById("xmlString").innerHTML; var xmlData = getXmlDOMFromString(xmlString); </script> |
下面看下逆过程，也就是从XML DOM中返回XML字符串(见清单18)。
Listing 18. Cross-browser JavaScript function for returning a string representation of an XML DOM object
|
<script type="text/javascript"> /** * Returns string representation of passed XML object */ function getXmlAsString(xmlDom){ return (typeof XMLSerializer!=="undefined") ? (new window.XMLSerializer()).serializeToString(xmlDom) : xmlDom.xml; } </script> |
- 通过Ajax将XML装载进浏览器
最后种在JavaScript中获取XML的方法是通过Ajax。详见后面关于jQuery的部分。
JavaScript中处理XML
让我们看看之前提到的一些标准的JavaScript方法如果应用到XML上。要获得当前条目的description字段和相关条目的id，可以通过清单19的代码实现。
Listing 19. XML Processing using JavaScript
|
<script type="text/javascript"> // get value of single node var descriptionNode = xmlData.getElementsByTagName("description")[0]; var description = descriptionNode.firstChild && descriptionNode.firstChild.nodeValue;
// get values of nodes from a set var relatedItems = xmlData.getElementsByTagName("related_item"); // xmlData is an XML doc var relatedItemVals = []; var tempItemVal; for (var i=0,total=relatedItems.length; i<total; i++){ tempItemVal = relatedItems[i].firstChild ? relatedItems[i].firstChild.nodeValue : ""; relatedItemVals.push(tempItemVal); }
// set and get attribute of a node description.setAttribute("language", "en"); description.getAttribute("language"); // returns "en" </script> |
仔细看上面的代码。getElementsByTagName()这个之前也见过的方法对于处理XML埋深重要，因为它让妳可以获取到给定名称的XML元素。（需要再次重申的是在处理XML时大小写是敏感的）。然后再检查一下descriptionNode 是否包含子节点就可以安全地返回description 的值了。如果有子节点，那么就可以访问nodeValue获取值。当妳想要获取某个特定节点的文本值时，事情变得有点难了。虽然某些浏览器支持在XML中使用之前提到的innerHTML属性，但大多数不支持。所以妳需要首先检查下它是否包含firstChild （文本节点textNode，注释节点comment ，子节点child node），如果有才可以访问nodeValue。上面的代码中，如果检查到不存在子节点则返回空字符串。
最后，妳看到，setAttribute() 和 getAttribute()方法的使用完全和在HTML中一样。
到这里妳已经见识了如何使用原始的JavaScript代码来处理HTML和XML节点。下一节中引入jQuery,妳将会看到这个库有多强大威武，不仅简化了处理流程而且使妳对DOM的操作更得心应手。