网站地图    收藏   

子栏目

主页 > 前端 > javascript >

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

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

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

例1

 代码如下 复制代码

<script type="text/javascript">
function loadXML(xmlFile) {
     var xmlDoc;
　　if (window.ActiveXObject){//兼容IE浏览器
　　xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
　　xmlDoc.async=false;;//关闭异步加载，如许可确保在文档完整加载之前，解析器不会继续执行剧本
　　xmlDoc.load(xmlFile);//告知解析器加载名为 xmlfile 的文档
　　xmlDoc=xmlDoc.documentElement;//获取XML文档中的根元素
　　}
　　else if (document.implementation && document.implementation.createDocument){
　　xmlDoc=document.implementation.createDocument(""," ",null);//兼容火狐浏览器
　　xmlDoc.async=false;//关闭异步加载，如许可确保在文档完整加载之前，解析器不会继续执行剧本
　　xmlDoc.load(xmlFile);//告知解析器加载名为 xmlfile 的文档
　　xmlDoc=xmlDoc.documentElement;//获取XML文档中的根元素
　　}
　　else
　　{
　　xmlDoc=null;
　　}
　　}
    xmlDoc=loadXML("menuList.xml");
    var menus=xmlDoc.documentElement.getElementsByTagName("info");
    var htmlText="<ul>";
    for(i=0;i<menus.length;i++)
    {
        var category=menus[i].childNodes[0].text;
        var model=menus[i].childNodes[1].text;
        var mlink=menus[i].childNodes[2].text;
        htmlText+="<li><a href='"+mlink+"'>"+category+"</a></li>";
    }
    htmlText+="</ul>";
     document.getElementById('menulist').innerHTML+=htmlText;
    </script>
</body>
</html>

XML文件：

<?xml version="1.0" encoding="utf-8" ?>
<bmenu>
 <info>
 <category>Nokia/诺基亚</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>Samsung/三星</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>Lenovo/联想</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>BIRD/波导</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>Motorola/摩托罗拉</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>Coolpad/酷派</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
 <info>
  <category>Gionee/金立</category>
  <model>3610A</model>
  <mlink>kk.html</mlink>
 </info>
</bmenu>

例2

 代码如下 复制代码

//note.xml

<note>
<date>2008-08-08</date>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting this weekend!</body>
</note>

//readXml.htm

<html>

<head>

<title>E4X</title>

<script type="text/javascript">
var xmlDoc;
function clickHandler()
{
if (window.ActiveXObject)
{
   xmlDoc = new ActiveXObject("MSXML.DOMDocument");
   if(xmlDoc == null)
   {
    window.alert("MSXML.DOMDocument isn't installed.");
   }
   else
   {
      xmlDoc.async=false;
      xmlDoc.load("note.xml");
         document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);
   }
}
// code for Mozilla, Firefox, etc.
else if(document.implementation && document.implementation.createDocument)
{
   xmlDoc= document.implementation.createDocument("","",null)
   xmlDoc.load("note.xml");
   xmlDoc.onload=function()//anonymous function
        {
         document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);
        }
}
}

</script>

</head>

<body>
<span>nothing</span>
<button onclick="javascript:clickHandler()"/>hello, world.

</body>

</html>

例3

 代码如下 复制代码

///////////////////////////////////////////////////////////
首先：xml文件（tree.xml）内容如下：
<?xml version="1.0" encoding="gb2312"?>
<treeview>
<tree id="p1">
  <text>山东省</text>
  <target>_blank</target>
  <title>省份</title>
  <link></link>
  <tree id="p1-1">
    <text>威海市</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
  </tree>
  <tree id="p1-2">
    <text>烟台市</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
    <node id="p1-2-1">
      <text>长夼村</text>
      <target>_blank</target>
      <title>乡镇</title>
      <link>http://www.111cn.net/</link>
    </node>
  </tree>
  <node id="p1-3">
   <text>富镇</text>
   <target>_blank</target>
   <title>乡镇</title>
   <link>http://www.111cn.net/</link>
  </node>
 </tree>

<tree id="p2">
  <text>河北省</text>
  <target>_blank</target>
  <title>省份</title>
  <link></link>
  <tree id="p2-1">
    <text>泊头市</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
    <node id="p2-1-1">
      <text>郊河</text>
      <target>_blank</target>
      <title>乡镇</title>
      <link>http://www.111cn.net/</link>
    </node>
  </tree>
  <tree id="p2-2">
    <text>石家庄</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
  </tree>
</tree>

<tree id="p3">
  <text>浙江省</text>
  <target>_blank</target>
  <title>省份</title>
  <link></link>
  <tree id="p3-1">
    <text>杭州市</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
    <node id="p3-1-1">
      <text>某镇</text>
      <target>_blank</target>
      <title>乡镇</title>
      <link>http://www.111cn.net/</link>
    </node>
  </tree>
  <tree id="p3-2">
    <text>温州市</text>
    <target>_blank</target>
    <title>城市</title>
    <link></link>
 <node id="p3-2-1">
      <text>某镇</text>
      <target>_blank</target>
      <title>乡镇</title>
      <link>http://www.111cn.net/</link>
    </node>
  </tree>
</tree>
</treeview>
//////////////////////////////////////////////////////
然后：javascript函数实现：(文件名称：tree.htm）
<script Language="JavaScript">
var HTML = "";
var space = "";
var blank = "  ";
function getSubject()
{
    var xmlDoc;

    if(window.ActiveXObject)
    {
     //获得操作的xml文件的对象
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
        xmlDoc.async = false;
        xmlDoc.load("tree.xml");
        if(xmlDoc == null)
        {
          alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
          window.location.href='/Index.aspx';
    return;
        }
    }
 //解析xml文件，判断是否出错
    if(xmlDoc.parseError.errorCode != 0)
    {
       alert(xmlDoc.parseError.reason);
       return;
    }
 //获得根接点
    var nodes = xmlDoc.documentElement.childNodes;
 //得到根接点下共有子接点个数，并循环
    for(var i=0; i<nodes.length; i++)
    {
   //如果接点名为 tree
      if(nodes(i).nodeName == "tree")
      {
        readTree(nodes(i));
      }
   //如果接点名为 node
      else if(nodes(i).nodeName == "node")
      {
        readNode(nodes(i));
      }
    }
    //删除对象
    delete(xmlDoc);
    //显示HTML
    window.show.innerHTML = HTML;
    return;
}
//读Tree节点
function readTree(cI)
{
    var nodes = cI.childNodes;
    var menuHTML = space;
    menuHTML += blank;
 //得到超级链接
    menuHTML += "<a href='";
 //如果该节点的连接属性不为空，则连接
    if(cI.selectNodes("link")(0).text != "")
    {
       menuHTML += cI.selectNodes("link")(0).text;
    }
 //否则为空链接
    else
    {
       menuHTML += "#";
    }
 //目标
    if(cI.selectNodes("target")(0).text != "")
 {
       menuHTML += " target='"+cI.selectNodes("target")(0).text;
       menuHTML += "'";
    }
 //点击菜单事件，调用divshow(vid)函数
    menuHTML += " onclick=javascript:divshow('"+cI.getAttribute("id")+"');";
 //得到节点标题
    menuHTML += " title='";
    menuHTML += cI.selectNodes("title")(0).text;
 //结束
    menuHTML += "'>";
    //得到节点的正文
    menuHTML += cI.selectNodes("text")(0).text;
    menuHTML += "</a><br>n";
 //将menuHTML设置添加到HTML字符串
    HTML += menuHTML;
 //得到该节点的属性值<span
    HTML += "<div id='"+cI.getAttribute("id")+"' style='display:none'>n";
    for(var i=0; i<nodes.length; i++)
    {
       var tempImg = "";
       tempImg += blank;
       if(nodes(i).nodeName == "tree")
       {
         space += tempImg;
         readTree(nodes(i));
         space = "";
       }
       else if(nodes(i).nodeName == "node")
       {
         space += tempImg;
         readNode(nodes(i));
       }
    }
    HTML += "</div>n";
    return;
}
//读Node节点
function readNode(cI)
{
   var nodeHTML = space;
   nodeHTML += blank;
   //设置超级链接
   nodeHTML += "<a href='";
   //得到连接地址
   nodeHTML += cI.selectNodes("link")(0).text;
   //目标
   if(cI.selectNodes("target")(0).text != "")
      nodeHTML += "' target='"+cI.selectNodes("target")(0).text;
   //得到节点标题
   nodeHTML += "' title='";
   nodeHTML += cI.selectNodes("title")(0).text;
   //结束
   nodeHTML += "'>";
   //得到节点的正文
   nodeHTML += cI.selectNodes("text")(0).text;
   nodeHTML += "</a><br>n";
   HTML += nodeHTML;
   //HTML += "<div id='"+cI.getAttribute("id")+"'>";
   space = "";
   return;
}
//操作对象的显示还是隐藏效果
function divshow(vid)
{
  if(document.all[vid].style.display == "none")
  {
    document.all[vid].style.display = "block";
  }
  else
  {
    document.all[vid].style.display = "none";
  }
  return;
}
</script>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS_XML</title>

<style type="text/css">
<!--
body
{
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 font-size: 9pt;
}
A
{
 text-decoration:none;
 font-family: "宋体";
 font-size: 9pt;
 COLOR:#000000;
}
-->
</style>

</head>
<body bgcolor="#EEEEEE" leftmargin="0" topmargin="0">
<div id=show></div>
</body>
<script>
getSubject()
</script>
</html>

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

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论