javascript
浏览器中的XML与JavaScript
瀏覽器中的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文件，甚至是本地服務器（見清單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> (這個元素可以不在展示)。然后通過之前提到過的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> |
?
?
?
最后種在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的操作更得心應手。
總結
以上是生活随笔為你收集整理的浏览器中的XML与JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Maximal Rectangle
- 下一篇： html5 canvas（小树姐的牛掰到