欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-27 08:12:50
本文实例讲述了javascript实现读取与输出xml文件数据的方法。分享给大家供大家参考,具体如下: 一、介绍 通过javascript读取xml文档中数据的方法很多...

本文实例讲述了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>www.jb51.net 获取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

ps:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:

在线xml/json互相转换工具:

在线格式化xml/在线压缩xml

xml在线压缩/格式化工具:

xml代码在线格式化美化工具:

更多关于javascript相关内容可查看本站专题:《javascript操作xml文件技巧总结》、《javascript文件与目录操作技巧汇总》、《javascript中ajax操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数据结构与算法技巧总结

希望本文所述对大家javascript程序设计有所帮助。