在网上找到一篇javascript读取xml数据很详细的文章,特转到自己博客中,一来同大家分享,二来留作资料参考!..........
///////////////////////////////////////////
首先: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.baidu.com/</link>
</node>
</tree>
<node id="p1-3">
<text>富镇</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</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.baidu.com/</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.baidu.com/</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.baidu.com/</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>
运行,要在同一个路径下!
分享到:
相关推荐
Javascript读取XML Javascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript读取XMLJavascript...
利用javascript读取XML的一些方法的总结。
js读取Xml文件内容.zip
关于javascript读取xml文件的,有需要的朋友可以下载
用javascript读取xml文件读取节点数据_.docx
用javascript读取xml文件读取节点数据__1.docx
利用Javascript读取XML文件的示例,直接打开index.html文件即可看到效果
JavaScript读取XML节点生成多级菜单
有时候我们需要在javascript里读取相应的xml文件,所以共享此方法,愿我们的开发更充满激情。
主要介绍了用javascript读取xml文件读取节点数据的具体实现,需要的朋友可以参考下
主要介绍了JS读取XML文件数据并以table形式显示数据的方法,涉及javascript针对xml节点操作及HTML表格操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
此资料可以让静态的html页面可以实现像jsp,asp,asp.net,php等动态读取数据的效果,只需用到javascript读取xml里面的数据就可以啦,里面的很多的例子讲说,只要看一遍就会做啦。。。
最近需要做这样一个需求,数据保存在XML里,在页面上通过表格显示其内容,可以修改内容,再保存到XML。下面把做这个东西的过程记录下来,做个笔记,也给需要的人一些帮助。
Asp+Js读取远程xml文件,Javascript Js跨域读取xml文件
主要介绍了javascript读取xml数据对其实现javascript分页效果,大家参考使用吧
ETL KETTLE 中利用Httpclient 调用webservice接口获取XML数据,并解析XML 数据。 完整的KTR实例
javascript读取XML信息并显示
介绍javascrip读取、发送XML数据的操作,包括异步传输等的对XML进行数据读写、插入、更新等。
javascript 支持多参数 多语言 读取xml信息 实现统一接口,快速读取xml,兼容多个浏览器
主要介绍了JavaScript操作XML文件之XML读取方法,涉及javascript操作XML文件的相关技巧,需要的朋友可以参考下