JavaScript实现读取与输出XML文件数据的方法示例


Posted in Javascript onJune 05, 2018

本文实例讲述了JavaScript实现读取与输出XML文件数据的方法。分享给大家供大家参考,具体如下:

一、介绍

通过JavaScript读取XML文档中数据的方法很多。

其根本的思路就是:首先在后台加载XML文档,然后通过JavaScript获取文档中所需的数据,最后应用HTML展示获取的数据。

二、获取XML元素的属性值的应用

下面应用attributes属性和getNamedItem()方法获取一个指定的XML文档中的属性值。

三、代码

首先创建一个XML文档,并且为指定的元素设置属性,程序代码如下:

<?xml version="1.0" encoding="GB2312"?>
<employes>
  <employe id='1' attendence='经理'>
    <number>1001</number>
    <name>程**</name>
    <object>PHP</object>
    <tel>84971547</tel>
    <address>长春市</address>
    <e_mail>cak**@sina.com</e_mail>
  </employe>
</employes>

然后创建一个index.html文件,实现XML元素中数据和属性值的输出。

获取employe元素的引用,通过attributes获取employe元素的属性集合,用getNamedItem()方法获取集合attributes中attendence对象的引用,并将其赋值给变量attendenceperson。最后通过字符串的拼接实现XML文档中数据和属性值的输出,这里获取的属性值为“经理”。

程序代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>3water.com 获取XML元素的属性值</title>
</head>
<script>
function get_xml(){
  var xmldoc,employesNode,employeNode;        //定义变量
  var nameNode,titleNode,numberNode,displayText;   //定义变量
  var attributes,attendenceperson
  xmldoc = new ActiveXObject("Microsoft.XMLDOM");
  xmldoc.async = false;
  xmldoc.load("index.xml"); //载入指定的XML文档
  employesNode=xmldoc.documentElement;        //获取根节点
  employeNode=employesNode.firstChild;        //访问根元素下的第一个节点
  numberNode=employeNode.firstChild;         //获取number元素
  nameNode=numberNode.nextSibling;          //获取name元素
  objectNode=nameNode.nextSibling;
  telNode=objectNode.nextSibling;
  attributes=employeNode.attributes;         //获取employe节点的属性集合
  attendenceperson=attributes.getNamedItem("attendence")   //获取集合指定对象的引用
  //实现字符串的拼接,输出XML文档中的数据
  displayText="员工信息:"+numberNode.firstChild.nodeValue+','+nameNode.firstChild.nodeValue+', '+objectNode. firstChild.nodeValue+','+telNode.firstChild.nodeValue+"<br>职务:"+attendenceperson.value;
  div.innerHTML=displayText; //指定在ID标识为div的<div>标签中输出字符串displayText的信息
}
</script>
<body>
<h1>输出XML元素中的数据和属性值</h1>
<!--应用onClick事件调用函数get_xml()-->
<input type="button" value="获取XML元素的属性值" onClick="get_xml()">
<div id="div"></div>
</body>
</html>

四、运行结果

JavaScript实现读取与输出XML文件数据的方法示例

注:这里使用了ActiveXObject来进行针对xml文件的操作,需要使用兼容IE的浏览器才能得到运行效果。否则会提示:ActiveXObject is not defined

Javascript 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
JS实现分页导航效果
Feb 19 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 #Javascript
Vue项目中跨域问题解决方案
Jun 05 #Javascript
Vue多系统切换实现方案
Jun 05 #Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 #Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 #Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php中常用编辑器推荐
2007/01/02 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
快速查询Python文档方法分享
2017/12/27 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Python 复平面绘图实例
2019/11/21 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
场地使用证明模板
2014/10/25 职场文书
捐助感谢信
2015/01/22 职场文书
辞职离别感言
2015/08/04 职场文书
MySQL注入基础练习
2021/05/30 MySQL
解析目标检测之IoU
2021/06/26 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python