JavaScript 解析读取XML文档 实例代码


Posted in Javascript onJuly 07, 2009

JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来。
在线演示:http://demo.3water.com/js/2012/readxml/
注:测试的时候需要在网站中测试,iis或apache中,注意不要本地双击运行测试
index.htm

<html> 
<head> 
<title>三水点靠木</title> 
<script type="text/javascript"> 
function show() 
{ 
if (window.XMLHttpRequest) 
{ 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
if(xmlhttp!=null) 
{ 
xmlhttp.open("GET","3water.xml",false); 
xmlhttp.send(null); 
var responsexml=xmlhttp.responseXML; 
var menus=responsexml.getElementsByTagName("Menus")[0]; 
var html=""; 
for(var i=0;i<menus.childNodes.length;i++) 
{ 
var menu=menus.childNodes[i]; 
html=html+"<h1>"+menu.getAttribute("name")+"</h1><br>"; 
html=html+"<h2>"+menu.childNodes[0].getAttribute("name")+"</h2><br>"; 
for(var j=0;j<menu.childNodes[0].childNodes.length;j++) 
{ 
var mi=menu.childNodes[0].childNodes[j]; 
var url=mi.getAttribute("url"); 
var txt=mi.childNodes[0].nodeValue; 
html=html+" <a href=\""+url+"\">"+txt+"</a><br>"; 
} 
} 
document.getElementById("tb").innerHTML=html; 
} 
else 
{ 
alert("你用的什么浏览器?"); 
} 
} 
</script> 
</head> 
<body onload="show()"> 
<div id="tb"></div> 
</body> 
</html>

xml文件
<?xml version="1.0" encoding="utf-8"?> 
<Menus> 
<Menu id="0" name="首页"> 
<MenuItemTitle sid="01" mid="0" name="常用选项"> 
<MenuItem mid="0" tid="01" url="Home.aspx">后台首页</MenuItem> 
<MenuItem mid="0" tid="01" url="Test.aspx">测试页</MenuItem> 
</MenuItemTitle> 
</Menu> 
<Menu id="0" name="试试"> 
<MenuItemTitle sid="01" mid="0" name="常用选项"> 
<MenuItem mid="0" tid="01" url="Home.aspx">后台首页</MenuItem> 
<MenuItem mid="0" tid="01" url="Test.aspx">测试页</MenuItem> 
</MenuItemTitle> 
</Menu> 
</Menus>

没有用TABLE ,是因为显示倒了,所以设置了一个变量,然后显示!值得今后借签!

下面是另外一个例子:
编写了一个JavaScript的类来实现读取一个XML文件中的数据,实现代码如下所示:

<script> 
/** 
* @author Shirdrn 
*/ 
function XMLDoc(){}; // 定义一个XMLDoc类 
XMLDoc.prototype.xmlFile = ""; // xmlFile为XMLDoc的一个成员,是指“.xml”文件 
XMLDoc.prototype.parseXMLDoc = function(){ // 加载解析XML文件的成员方法 
var docParser; 
if(window.ActiveXObject) { // IE浏览器支持 
docParser = new ActiveXObject("Microsoft.XMLDOM"); 
docParser.async = "false"; 
docParser.load(this.xmlFile); 
return docParser; 
} 
else if(window.DOMParser) { // Mozillia浏览器支持 
docParser = new DOMParser() 
return docParser.parseFromString(this.xmlFile,"text/xml"); 
} 
else { // 如果不是IE和Mozillia浏览器则无法解析,返回false。 
return false; 
} 
} 
XMLDoc.prototype.print = function(readTagName,readTagCnt) { // 打印输出读取的XML文件的内容信息 
var xmlDoc = this.parseXMLDoc(); // 调用成员方法parseXMLDoc()加载解析XML文件 
var users = xmlDoc.getElementsByTagName(readTagName); // 获取指定标签名称的数据的一个数组users 
for(var i=0 ; i<users.length ; i++) { // 双重循环迭代输出 
document.write("<B>第" + (i+1) + "条记录信息:</B><BR>"); 
for(var j=0 ; j<readTagCnt ; j++) { 
var tagname = users[i].childNodes[j].tagName; 
var textvalue = users[i].childNodes[j].text; 
document.write(tagname + " = " + textvalue + ".<BR>"); 
} 
} 
} var xmlDoc = new XMLDoc(); // 创建一个XMLDoc了IDE对象实例 
xmlDoc.xmlFile = "user.xml"; // 设置对象实例的成员变量的数据 
xmlDoc.print("user",6); // 打印输出 
</script>

其中,我们测试使用的XML文件user.xml的内容如下所示:
<?xml version="1.0" encoding="utf-8" ?> 
- <users> 
- <user> 
<id>22240319830000</id> 
<name>Shirdrn</name> 
<age>26</age> 
<gender>男</gender> 
<email>shirdrn@hotmail.com</email> 
<phone>13843140000</phone> 
</user> 
- <user> 
<id>22040319860001</id> 
<name>Linda</name> 
<age>23</age> 
<gender>女</gender> 
<email>linda@hotmail.com</email> 
<phone>13843140002</phone> 
</user> 
</users>

运行测试程序,解析结果输出如下所示:
第1条记录信息: 
id = 22240319830000. 
name = Shirdrn. 
age = 26. 
gender = 男. 
email = shirdrn@hotmail.com. 
phone = 13843140000. 
第2条记录信息: 
id = 22040319860001. 
name = Linda. 
age = 23. 
gender = 女. 
email = linda@hotmail.com. 
phone = 13843140002.

在解析XML文件的时候,要保证对不同类型的浏览器提供支持,这里主要对IE和Mozillia浏览器,否则可能无法解析。
关于其它的说明,可以参看程序中的注释。
Javascript 相关文章推荐
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
javascript 新浪背投广告实现代码
Jul 07 #Javascript
JavaScript 对象、函数和继承
Jul 07 #Javascript
js 日期转换成中文格式的函数
Jul 07 #Javascript
javascript 面向对象思想 附源码
Jul 07 #Javascript
jquery BS,dialog控件自适应大小
Jul 06 #Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 #Javascript
javascript 写类方式之十
Jul 05 #Javascript
You might like
php实现ping
2006/10/09 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
应届生求职信写作技巧
2013/10/24 职场文书
毕业自我鉴定
2013/11/05 职场文书
村抢险救灾方案
2014/05/09 职场文书
员工年终考核评语
2014/12/31 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
企业宣传稿范文
2015/07/23 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书