Javascript—XPATH技术解析XML

XML可扩展标记语言，作为传输和存储数据的载体，在web开发中应用很广泛。在我们需要将XML数据传递给前端时，需要用javascript解析才能使用，所以，使用javascript解析XML也是很普遍的。

通过javascript解析XML，我们可以使用DOM这个强大的工具（针对HTML文档、XML等文档的一套API），也就是通过getElementById或者getElementsByTagName这些方法解析XML。

    那它们在解析XML时是否合适，我们考虑下下面的几个问题：

    首先XML中每个元素节点不一定有id属性；其次XML中的两个元素节点可能有相同的id属性；这样使用getElementById就不能保证找到我们需要的唯一节点了。而getElementsByTagName一次获取的节点太多，在进行遍历获取数据，比较麻烦。

    就XML而言，对比JSON，XML文件庞大，格式复杂，在通过DOM解析显然需要花费更过的资源和时间，用户体验肯定不好。

   有没有更好点的方法呢？

 

XPATH技术—解决问题的良药

 

         XPATH是什么？全称是XML Path Language（XML路径语言），适用于确定XML文档中某节点位置的语言。

    我们可以把它当作类似于SQL一样的查询语言，通过给出XPATH路径信息（就像SQL命令一样）就可以从XML中查找出符合条件的节点（就像从数据库中返回需要的数据一样）。

 

         Java中的DOM4j开源包中有selectSingleNode和selectNodes这样两个方法可以根据XPATH表达式来获取一个或多个节点。

    在IE6.0及以后版本中我们可以使用同样的方式来访问任意深度的XML数据，这给XML数据的解析操作带来了便利。

    但是在firefox等浏览器中，则是使用了w3c标准的XPATH处理方式，没有IE这么简单的方式，firefox中需要建立相应的操作对象和计算方法，才能返回对应的节点。

解决各种浏览器加载xml的问题

           var xmlDoc; 
    	   var loadXML = function (xmlFile) {
   		  if (window.ActiveXObject) {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");//IE浏览器
                xmlDoc.async = false;
                xmlDoc.load(xmlFile);
            }
            else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
            //else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
                xmlDoc = document.implementation.createDocument('', '', null);
                xmlDoc.load(xmlFile);
            }
            else{ //谷歌浏览器
                var xmlhttp = new window.XMLHttpRequest();
                xmlhttp.open("GET",xmlFile,false);
                xmlhttp.send(null);
                xmlDoc = xmlhttp.responseXML.documentElement;  
            }
            return xmlDoc;
        }

   封装方法，创建在不同浏览器中都可进行XPATH操作的封装方法

[javascript]  view plain  copy

 

1. //根据指定的XPATH表达式查找满足条件的所有节点  
2. //@param xmldoc 执行查找的节点  
3. //@param sXpath xpath的表达式  
4. function selectNodes(xmldoc,sXpath){    
5.     
6.     if(window.ActiveXObject){         
7.         //IE浏览器       
8.         return xmldoc.selectNodes(sXpath);          
9.     }else if(window.XPathEvaluator){        
10.         //FireFox类浏览器         
11.         var xpathObj=new XPathEvaluator();    
12.   
13.         if(xpathObj){    
14.                  var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITEARTOR_TYPE,null);          
15.             var nodes=new Array();          
16.             var node;          
17.             while((node = result.iterateNext())!=null) {          
18.                 nodes.push(node);         
19.             }          
20.            return nodes;    
21.     
22.         }else{    
23.     
24.             return null;                                
25.         }    
26.     
27.     }else{          
28.         return null;          
29.     }          
30. }    
31.   
32. //根据指定的XPATH表达式查找满足条件的第一个节点  
33. //@param xmldoc 执行查找的节点  
34. //@param sXpath xpath的表达式  
35. function selectSingleNode(xmldoc,sXpath){    
36.     if(window.ActiveXObject){         
37.         //IE浏览器          
38.         return xmldoc.selectSingleNode(sXpath);          
39.     }else if(window.XPathEvaluator){          
40.         //FireFox类浏览器          
41.         var xpathObj=new XPathEvaluator();          
42.         if(xpathObj){          
43.             var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITEARTOR_TYPE,null);                                
44.             return result.singleNodeValue;          
45.         }else{          
46.             return null;                                 
47.         }          
48.     }else{          
49.         return null;          
50.     }          
51. }    

      注：

   evaluate()方法返回的是一个节点列表，得到节点列表后iterateNext()方法来遍历这个列表中的所有节点。而ORDERED_NODE_ITERATOR_TYPE就是节点的列表，按照文档中节点的属性排列。

实例—通过XPATH表达式获取XML数据

 

    XML

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <books>  
4.     <book isdn="0001">  
5.         <author>wang</author>  
6.         <name>AJAX Professional</name>  
7.         <price>35</price>  
8.     </book>  
9.     <book isdn="0002">  
10.         <author>lee</author>  
11.         <name>AJAX In Action</name>  
12.         <price>65</price>  
13.     </book>  
14.     <book isdn="0003">  
15.         <author>zhu</author>  
16.         <name>AJAX For Dummies</name>  
17.         <price>40</price>  
18.     </book>  
19.     <author>123</author>  
20. </books>  

   通过调用selectNodes()函数来获取不同参数的值

    下面通过六个需求来进行说明

[javascript]  view plain  copy

 

1. <script type="text/javascript">  
2.       function testxpath(){  
3.           var rootElement = loadXML(true,"XPATH.xml");  
4.           removeBlank(rootElement);  
5.          
6.           //需求1，获取元素节点  
7.           //查找所有的author元素节点  
8.           //关键就是如何表式元素节点在DOM树中的路径  
9.           // 绝对路径 /books/book/author  
10.           // 相对路径 book/author  
11.           // 全文档搜索法 //author , //book/author  
12.           var author1 = selectNodes(rootElement,"/books/book/author");  
13.           var author2 = selectNodes(rootElement,"book/author");  
14.           var author2 = selectNodes(rootElement,"//author");  
15.           var author2 = selectNodes(rootElement,"//book/author");  
16.             
17.           //需求2，获取属性节点  
18.           //关键是先找到包含属性节点的元素节点  
19.           var isdn1 = selectNodes(rootElement,"/books/book/@isdn");  
20.           var isdn2 = selectNodes(rootElement,"book/@isdn");  
21.           var isdn3 = selectNodes(rootElement,"//book/@isdn");  
22.           var isdn4 = selectNodes(rootElement,"//books/@isdn");  
23.             
24.           //需求3，获取文本节点  
25.           //关键是找到包含文本节点的那个元素节点  
26.           var text1 = selectNodes(rootElement,"/books/book/name/text()");  
27.           var text2 = selectNodes(rootElement,"book/name/text()");  
28.           var text3 = selectNodes(rootElement,"//book/name/text()");  
29.           var text4 = selectNodes(rootElement,"//name/text()");  
30.             
31.           //需求4，有条件的查找元素节点  
32.           //需要先找到元素节点，然后再增加条件表达式,[条件]  
33.           var book1 = selectNodes(rootElement,"/books/book[@isdn]");  
34.           var book2 = selectNodes(rootElement,"book[@isdn]");  
35.           var book3 = selectNodes(rootElement,"//book[@isdn]");  
36.             
37.           //需求5，多个添加与关系的查找元素节点  
38.           //需要首先找到元素节点，然后每一个查询条件写在一个中括号中  
39.           var bookA1 = selectNodes(rootElement,"/books/book[@isdn='0002'][price>35]");  
40.           var bookA2 = selectNodes(rootElement,"book[@isdn='0002'][price>35]");  
41.           var bookA3 = selectNodes(rootElement,"//book[@isdn='0002'][price>35]");  
42.             
43.           //需求6，‘|’或关系查找  
44.           var bookA3 = selectNodes(rootElement,"//book[@isdn='0002']| /books/book[price>35]");  
45.             
46.           alert("");  
47.       }  
48.   </script>  

        XPath是对专门对XML操作的语言，通过XPath语言，可以很方便的找到你想要的那个节点，代码方便，而且效率。