编程 Javascript

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实现读取与输出XML文件数据的方法示例

- Author -

chengqiuming

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS实现网页背景颜色与select框中颜色同时变化的方法

Feb 27 Javascript

分享两款带遮罩的jQuery弹出框

Dec 30 Javascript

JavaScript SweetAlert插件实现超酷消息警告框

Jan 28 Javascript

浅析JSONP技术原理及实现

Jun 08 Javascript

JavaScript中实现键值对应的字典与哈希表结构的示例

Jun 12 Javascript

js变量提升深入理解

Sep 16 Javascript

利用Bootstrap实现表格复选框checkbox全选

Dec 21 Javascript

详解从Vue.js源码看异步更新DOM策略及nextTick

Oct 11 Javascript

vue返回上一页面时回到原先滚动的位置的方法

Dec 20 Javascript

用webpack4开发小程序的实现方法

Jun 04 Javascript

原生js实现购物车

Sep 23 Javascript

JavaScript实现简易计算器小功能

Oct 22 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