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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
js 省地市级联选择
Feb 07 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
vue实现分页加载效果
Dec 24 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
第二节--PHP5 的对象模型
2006/11/16 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php中define用法实例
2015/07/30 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
基于Python的关键字监控及告警
2017/07/06 Python
代码详解django中数据库设置
2019/01/28 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
高三毕业典礼主持词
2014/03/27 职场文书
建设工地安全标语
2014/06/07 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
Python实现机器学习算法的分类
2021/06/03 Python