js读取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>

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

时间： 2024-08-02 12:00:05

js读取XML数据兼容主流浏览器的相关文章

JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)_javascript技巧

本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>张秋丽</stuName> <stuSex>女 </stuSex> <stuAge>18</stuAge>

兼容主流浏览器的iframe自适应高度js脚本

 兼容主流浏览器的 iframe 自适应高度,很实用的,具体的js脚本如下,感兴趣的朋友可不要错过  兼容主流浏览器的 Iframe 自适应高度,js脚本如下:   代码如下: //iframe 高度自适应  function iframeAutoFit(iframeObj) {  setTimeout(function () {  if (!iframeObj) return;  iframeObj.height = (iframeObj.Document ? iframeObj.Docume

兼容主流浏览器的iframe自适应高度js脚本_javascript技巧

兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod

js代码实现的加入收藏效果并兼容主流浏览器_javascript技巧

//加入收藏 function AddFavorite(){ if (document.all) { addToBookMark(window.location.href, document.title); } else if (window.sidebar) { addToBookMark(document.title, window.location.href); } } function addToBookMark(url,title){ var ua = navigator.userAg

使用JS读取XML文件的方法_javascript技巧

由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,只能是很浅显的知道他的用法,但是还没有深层次的研究. 不同的浏览器对xml的解析方式不同,根据目前主流浏览器大致分三类: 第一类,ie祖宗: js 提供用于创建 Automation对象的方法,new ActiveXObject("Microsoft.XMLDOM") : 第二类:firefox,opera:用构造函数 DOMParser()实例化DOMParser对象,解析xml文本,并返回xml

用php读取xml数据

xml|数据 今天工作上碰到一个问题 由于我们的项目数据太少 所以需要从web search那边借调数据,他们只给我们提供了一个xml的接口.因此,我们需要把xml的数据转化成html呈现给大家.由于项目是基于php的,所以就摒弃了用js来读取xml选择了继续使用php.不过,我以前从来没有做过此类的尝试 所以找了很多网上资料同时参照了php的工作手册,发现在php4的环境下 用parser函数是一个比较好的选择(当然也可以用dom 但是需要对服务器重新进行配置 php5对dom支持得比较好).

Bootstrap编写一个兼容主流浏览器的受众门户式风格页面_javascript技巧

上一次写的<Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面>(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了:  首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板. 反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子. 我们

IE下JS读取xml文件示例代码_javascript技巧

使用JS读取xml文件,这里暂只考虑IE浏览器 step1 创建DOM对象 复制代码 代码如下: function createDom() { var xmlDoc = null; try { //IE if (typeof arguments.callee.activeXString != 'string') { var versions = [ "MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.3.0", "M

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f