JavaScript获取XML数据附示例截图


Posted in Javascript onMarch 05, 2014

Hot.xml文件 :

<?xml version="1.0" encoding="gb2312"?> 
<root> 
<item> 
<name>刘亦菲</name> 
<url>MingXing/LiuYiFei.htm</url> 
<color>red</color> 
</item> 
<item> 
<name>蔡依林</name> 
<url>MingXing/CaiYiLin.htm</url> 
<color>blue</color> 
</item> 
<item> 
<name>张娜拉</name> 
<url>MingXing/ZhangNaLa.htm</url> 
<color>green</color> 
</item> 
<item> 
<name>张韶涵</name> 
<url>MingXiang/ZhangShaoHan.htm</url> 
<color>grey</color> 
</item> 
<item> 
<name>张靓颖</name> 
<url>MingXing/ZhangLiangYin.htm</url> 
<color>black</color> 
</item> 
<item> 
<name>李宇春</name> 
<url>MingXing/LiYuChun.htm</url> 
<color>yellow</color> 
</item> 
<item> 
<name>徐若?</name> 
<url>MingXing/XuLuXuan.htm</url> 
<color>pink</color> 
</item> 
</root>

demo1.html文件:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript获取XML数据</title>
<script language="javascript">

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //创建XmlDom对象 
xmlDoc.async=true; //使用异步加载 
xmlDoc.onreadystatechange=loadedSales; 
function loadedSales() 
{ 
var txt=""; 
if(xmlDoc.readyState == 0){ 
alert("0"); 
} 
if(xmlDoc.readyState == 1){ 
alert("1"); 
} 
if(xmlDoc.readyState == 2){ 
alert("2"); 
} 
if(xmlDoc.readyState == 3){ 
alert("3"); 
} 
if(xmlDoc.readyState == 4) 
{ 
if(xmlDoc.parseError.errorCode != 0) 
{ 
txt="xml解析错误!"; 
}else{ 
var items=xmlDoc.documentElement.selectNodes("item"); 
if(items != null && items.length > 0) 
{ 
for(var i=0; i < items.length; i++) 
{ 
txt += "<li><a href="+items[i].childNodes[1].text+" mce_href="+items[i].childNodes[1].text+" style="color:" mce_style="color:""+items[i].childNodes[2].text+">"+items[i].childNodes[0].text+"</a></li>"; 
} 
}else{ 
txt=""; 
} 
} 
}else{ 
txt=""; 
} 
document.getElementById("sales").innerHTML=txt; 
} 
function loadXmlDoc() 
{ 
var url="Hot.xml"; 
xmlDoc.load(url); 
} 
</script> 
</head> <body onLoad="loadXmlDoc()"> 
<div id="sales"></div> 
</body> 
</html>

效果图:
JavaScript获取XML数据附示例截图
Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 #Javascript
javascript日期格式化示例分享
Mar 05 #Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 #Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 #Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 #Javascript
js特殊字符过滤的示例代码
Mar 05 #Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
用Php实现链结人气统计
2006/10/09 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
Vuex 入门教程
2018/01/10 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python如何统计序列中元素
2020/07/31 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
网站编辑求职信
2013/10/17 职场文书
采购助理岗位职责
2014/02/16 职场文书
社区文艺活动方案
2014/08/19 职场文书
授权收款委托书
2014/09/23 职场文书
西安导游词
2015/02/12 职场文书
出国留学自荐信模板
2015/03/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
学校证明范文
2015/06/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
详解Python中__new__方法的作用
2022/03/31 Python