夏日博客

A-A+

js读取XML数据兼容主流浏览器

2016年10月15日 前端设计 暂无评论 阅读 4 views 次

本文章总结了三个常用的js读取XML数据实现代码，这些都测试过现在主流的浏览器，可以说是兼容所有浏览器xml读取代码，有面要的朋友可参考。

例1，代码如下:

  1. <script type="text/javascript">  
  2. function loadXML(xmlFile) {  
  3.      var xmlDoc;  
  4. 　　if (window.ActiveXObject){//兼容IE浏览器   
  5. 　　xmlDoc = new ActiveXObject('Msxml2.DOMDocument');   
  6. 　　xmlDoc.async=false;;//关闭异步加载，如许可确保在文档完整加载之前，解析器不会继续执行剧本   
  7. 　　xmlDoc.load(xmlFile);//告知解析器加载名为 xmlfile 的文档   
  8. 　　xmlDocxmlDoc=xmlDoc.documentElement;//获取XML文档中的根元素   
  9. 　　}   
  10. 　　else if (document.implementation && document.implementation.createDocument){   
  11. 　　xmlDoc=document.implementation.createDocument(""," ",null);//兼容火狐浏览器   
  12. 　　xmlDoc.async=false;//关闭异步加载，如许可确保在文档完整加载之前，解析器不会继续执行剧本   
  13. 　　xmlDoc.load(xmlFile);//告知解析器加载名为 xmlfile 的文档   
  14. 　　xmlDocxmlDoc=xmlDoc.documentElement;//获取XML文档中的根元素   
  15. 　　}   
  16. 　　else   
  17. 　　{   
  18. 　　xmlDoc=null;   
  19. 　　}   
  20. 　　}  
  21.     xmlDoc=loadXML("menuList.xml");  
  22.     var menus=xmlDoc.documentElement.getElementsByTagName("info");  
  23.     var htmlText="<ul>";  
  24.     for(i=0;i<menus.length;i++)  
  25.     {  
  26.         var category=menus[i].childNodes[0].text;  
  27.         var model=menus[i].childNodes[1].text;  
  28.         var mlink=menus[i].childNodes[2].text;  
  29.         htmlText+="<li><a href='"+mlink+"'>"+category+"</a></li>";  
  30.     }  
  31.     htmlText+="</ul>";  
  32.      document.getElementById('menulist').innerHTML+=htmlText;  
  33.     </script>  
  34. </body>  
  35. </html>  

XML文件：

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <bmenu>  
  3.  <info>  
  4.  <category>Nokia/诺基亚</category>  
  5.   <model>3610A</model>  
  6.   <mlink>kk.html</mlink>  
  7.  </info>  
  8.  <info>  
  9.   <category>Samsung/三星</category>  
  10.   <model>3610A</model>  
  11.   <mlink>kk.html</mlink>  
  12.  </info>  
  13.  <info>  
  14.   <category>Lenovo/联想</category>  
  15.   <model>3610A</model>  
  16.   <mlink>kk.html</mlink>  
  17.  </info>  
  18.  <info>  
  19.   <category>BIRD/波导</category>  
  20.   <model>3610A</model>  
  21.   <mlink>kk.html</mlink>  
  22.  </info>  
  23.  <info>  
  24.   <category>Motorola/摩托罗拉</category>  
  25.   <model>3610A</model>  
  26.   <mlink>kk.html</mlink>  
  27.  </info>  
  28.  <info>  
  29.   <category>Coolpad/酷派</category>  
  30.   <model>3610A</model>  
  31.   <mlink>kk.html</mlink>  
  32.  </info>  
  33.  <info>  
  34.   <category>Gionee/金立</category>  
  35.   <model>3610A</model>  
  36.   <mlink>kk.html</mlink>  
  37.  </info>  
  38. </bmenu>  

例2,代码如下:

  1. //note.xml  
  2. <note>  
  3. <date>2008-08-08</date>  
  4. <to>George</to>  
  5. <from>John</from>  
  6. <heading>Reminder</heading>  
  7. <body>Don't forget the meeting this weekend!</body>  
  8. </note>  
  9. //readXml.htm  
  10. <html>  
  11. <head>  
  12. <title>E4X</title>  
  13. <script type="text/javascript">  
  14. var xmlDoc;  
  15. function clickHandler()  
  16. {  
  17. if (window.ActiveXObject)  
  18. {  
  19.    xmlDoc = new ActiveXObject("MSXML.DOMDocument");  
  20.    if(xmlDoc == null)  
  21.    {  
  22.     window.alert("MSXML.DOMDocument isn't installed.");  
  23.    }  
  24.    else  
  25.    {  
  26.       xmlDoc.async=false;  
  27.       xmlDoc.load("note.xml");  
  28.          document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);  
  29.    }  
  30. }  
  31. // code for Mozilla, Firefox, etc.  
  32. else if(document.implementation && document.implementation.createDocument)  
  33. {  
  34.    xmlDoc= document.implementation.createDocument("","",null)  
  35.    xmlDoc.load("note.xml");  
  36.    xmlDoc.onload=function()//anonymous function  
  37.         {  
  38.          document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);  
  39.         }  
  40. }  
  41. }  
  42. </script>  
  43. </head>  
  44. <body>  
  45. <span>nothing</span>  
  46. <button onclick="javascript:clickHandler()"/>hello, world.  
  47. </body>  
  48. </html>  

例3,代码如下:

首先：xml文件（tree.xml）内容如下：

  1. <?xml version="1.0" encoding="gb2312"?>  
  2. <treeview>  
  3. <tree id="p1">  
  4.   <text>山东省</text>  
  5.   <target>_blank</target>  
  6.   <title>省份</title>  
  7.   <link></link>  
  8.   <tree id="p1-1">  
  9.     <text>威海市</text>  
  10.     <target>_blank</target>  
  11.     <title>城市</title>  
  12.     <link></link>  
  13.   </tree>  
  14.   <tree id="p1-2">  
  15.     <text>烟台市</text>  
  16.     <target>_blank</target>  
  17.     <title>城市</title>  
  18.     <link></link>  
  19.     <node id="p1-2-1">  
  20.       <text>长夼村</text>  
  21.       <target>_blank</target>  
  22.       <title>乡镇</title>  
  23.       <link>https://www.xiariboke.net/</link>  
  24.     </node>  
  25.   </tree>  
  26.   <node id="p1-3">  
  27.    <text>富镇</text>  
  28.    <target>_blank</target>  
  29.    <title>乡镇</title>  
  30.    <link>https://www.xiariboke.net/</link>  
  31.   </node>  
  32.  </tree>  
  33. <tree id="p2">  
  34.   <text>河北省</text>  
  35.   <target>_blank</target>  
  36.   <title>省份</title>  
  37.   <link></link>  
  38.   <tree id="p2-1">  
  39.     <text>泊头市</text>  
  40.     <target>_blank</target>  
  41.     <title>城市</title>  
  42.     <link></link>  
  43.     <node id="p2-1-1">  
  44.       <text>郊河</text>  
  45.       <target>_blank</target>  
  46.       <title>乡镇</title>  
  47.       <link>https://www.xiariboke.net/</link>  
  48.     </node>  
  49.   </tree>  
  50.   <tree id="p2-2">  
  51.     <text>石家庄</text>  
  52.     <target>_blank</target>  
  53.     <title>城市</title>  
  54.     <link></link>  
  55.   </tree>  
  56. </tree>  
  57. <tree id="p3">  
  58.   <text>浙江省</text>  
  59.   <target>_blank</target>  
  60.   <title>省份</title>  
  61.   <link></link>  
  62.   <tree id="p3-1">  
  63.     <text>杭州市</text>  
  64.     <target>_blank</target>  
  65.     <title>城市</title>  
  66.     <link></link>  
  67.     <node id="p3-1-1">  
  68.       <text>某镇</text>  
  69.       <target>_blank</target>  
  70.       <title>乡镇</title>  
  71.       <link>https://www.xiariboke.net/</link>  
  72.     </node>  
  73.   </tree>  
  74.   <tree id="p3-2">  
  75.     <text>温州市</text>  
  76.     <target>_blank</target>  
  77.     <title>城市</title>  
  78.     <link></link>  
  79.  <node id="p3-2-1">  
  80.       <text>某镇</text>  
  81.       <target>_blank</target>  
  82.       <title>乡镇</title>  
  83.       <link>https://www.xiariboke.net/</link>  
  84.     </node>  
  85.   </tree>  
  86. </tree>   
  87. </treeview>  

然后：javascript函数实现：(文件名称：tree.htm）.

  1. <script Language="JavaScript">  
  2. var HTML = "";  
  3. var space = "";  
  4. var blank = "  ";  
  5. function getSubject()  
  6. {  
  7.     var xmlDoc;  
  8.     if(window.ActiveXObject)  
  9.     {  
  10.      //获得操作的xml文件的对象  
  11.         xmlDoc = new ActiveXObject('Microsoft.XMLDOM');  
  12.         xmlDoc.async = false;  
  13.         xmlDoc.load("tree.xml");  
  14.         if(xmlDoc == null)  
  15.         {  
  16.           alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');  
  17.           window.location.href='/Index.aspx';  
  18.     return;  
  19.         }  
  20.     }  
  21.  //解析xml文件，判断是否出错  
  22.     if(xmlDoc.parseError.errorCode != 0)  
  23.     {  
  24.        alert(xmlDoc.parseError.reason);  
  25.        return;  
  26.     }  
  27.  //获得根接点  
  28.     var nodes = xmlDoc.documentElement.childNodes;  
  29.  //得到根接点下共有子接点个数，并循环  
  30.     for(var i=0; i<nodes.length; i++)  
  31.     {  
  32.    //如果接点名为 tree  
  33.       if(nodes(i).nodeName == "tree")  
  34.       {  
  35.         readTree(nodes(i));  
  36.       }  
  37.    //如果接点名为 node  
  38.       else if(nodes(i).nodeName == "node")  
  39.       {  
  40.         readNode(nodes(i));  
  41.       }  
  42.     }  
  43.     //删除对象  
  44.     delete(xmlDoc);  
  45.     //显示HTML  
  46.     window.show.innerHTML = HTML;  
  47.     return;  
  48. }  
  49. //读Tree节点  
  50. function readTree(cI)  
  51. {  
  52.     var nodes = cI.childNodes;  
  53.     var menuHTML = space;  
  54.     menuHTML += blank;  
  55.  //得到超级链接  
  56.     menuHTML += "<a href='";  
  57.  //如果该节点的连接属性不为空，则连接  
  58.     if(cI.selectNodes("link")(0).text != "")  
  59.     {  
  60.        menuHTML += cI.selectNodes("link")(0).text;  
  61.     }  
  62.  //否则为空链接  
  63.     else  
  64.     {  
  65.        menuHTML += "#";  
  66.     }  
  67.  //目标  
  68.     if(cI.selectNodes("target")(0).text != "")  
  69.  {  
  70.        menuHTML += " target='"+cI.selectNodes("target")(0).text;  
  71.        menuHTML += "'";  
  72.     }  
  73.  //点击菜单事件，调用divshow(vid)函数  
  74.     menuHTML += " onclick=javascript:divshow('"+cI.getAttribute("id")+"');";  
  75.  //得到节点标题  
  76.     menuHTML += " title='";  
  77.     menuHTML += cI.selectNodes("title")(0).text;  
  78.  //结束  
  79.     menuHTML += "'>";  
  80.     //得到节点的正文  
  81.     menuHTML += cI.selectNodes("text")(0).text;  
  82.     menuHTML += "</a><br>n";  
  83.  //将menuHTML设置添加到HTML字符串  
  84.     HTML += menuHTML;  
  85.  //得到该节点的属性值<span   
  86.     HTML += "<div id='"+cI.getAttribute("id")+"' style='display:none'>n";  
  87.     for(var i=0; i<nodes.length; i++)  
  88.     {  
  89.        var tempImg = "";  
  90.        tempImg += blank;  
  91.        if(nodes(i).nodeName == "tree")  
  92.        {  
  93.          space += tempImg;  
  94.          readTree(nodes(i));  
  95.          space = "";  
  96.        }  
  97.        else if(nodes(i).nodeName == "node")  
  98.        {  
  99.          space += tempImg;  
  100.          readNode(nodes(i));  
  101.        }  
  102.     }  
  103.     HTML += "</div>n";  
  104.     return;  
  105. }  
  106. //读Node节点  
  107. function readNode(cI)  
  108. {  
  109.    var nodeHTML = space;  
  110.    nodeHTML += blank;  
  111.    //设置超级链接  
  112.    nodeHTML += "<a href='";  
  113.    //得到连接地址  
  114.    nodeHTML += cI.selectNodes("link")(0).text;  
  115.    //目标  
  116.    if(cI.selectNodes("target")(0).text != "")  
  117.       nodeHTML += "' target='"+cI.selectNodes("target")(0).text;  
  118.    //得到节点标题  
  119.    nodeHTML += "' title='";  
  120.    nodeHTML += cI.selectNodes("title")(0).text;  
  121.    //结束  
  122.    nodeHTML += "'>";  
  123.    //得到节点的正文  
  124.    nodeHTML += cI.selectNodes("text")(0).text;  
  125.    nodeHTML += "</a><br>n";  
  126.    HTML += nodeHTML;  
  127.    //HTML += "<div id='"+cI.getAttribute("id")+"'>";  
  128.    space = "";  
  129.    return;  
  130. }  
  131. //操作对象的显示还是隐藏效果  
  132. function divshow(vid)  
  133. {  
  134.   if(document.all[vid].style.display == "none")  
  135.   {  
  136.     document.all[vid].style.display = "block";  
  137.   }  
  138.   else  
  139.   {  
  140.     document.all[vid].style.display = "none";  
  141.   }  
  142.   return;  
  143. }  
  144. </script>  
  145.   
  146. <html>  
  147. <head>  
  148. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  149. <title>JS_XML</title>  
  150. <style type="text/css">  
  151. <!--  
  152. body  
  153. {  
  154.  margin-left: 0px;  
  155.  margin-top: 0px;  
  156.  margin-right: 0px;  
  157.  margin-bottom: 0px;  
  158.  font-size: 9pt;  
  159. }  
  160. A  
  161. {  
  162.  text-decoration:none;  
  163.  font-family: "宋体";  
  164.  font-size: 9pt;  
  165.  COLOR:#000000;  
  166. }   
  167. -->  
  168. </style>  
  169. </head>  
  170. <body bgcolor="#EEEEEE" leftmargin="0" topmargin="0">  
  171. <div id=show></div>  
  172. </body>  
  173. <script>  
  174. getSubject()  
  175. </script>  
  176. </html>  

运行，要在同一个路径下！

标签：

给我留言