JS实现加载和读取XML文件的方法详解


Posted in Javascript onApril 24, 2017

本文实例讲述了JS实现加载和读取XML文件的方法。分享给大家供大家参考,具体如下:

有时在开发时用到 JS 加载和读取XML文件的情况,写下提供参考,这里主要是分两步完成:

1. JS加载XML文件

步骤一般为(1),建立 XML DOM 对象;(2),设置加载方式,异步(推荐)或同步; (3)提供XML文件URL然后调用 load 方法;大致如下:

var xmlFileName="xxFile.xml";
var xmlDoc='';
if (window.ActiveXObject){ // IE
  var activeXNameList=new Array("MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM","MSXML.DOMDocument");
  for(var h=0;h<activeXNameList.length;h++)
  {
    try{
      xmlDoc=new ActiveXObject(activeXNameList[h]);
    }catch(e){
      continue;
    }
    if(xmlDoc) break;
  }
}else if(document.implementation && document.implementation.createDocument){ //非 IE
  xmlDoc=document.implementation.createDocument("","",null);
}else{
  alert('can not create XML DOM object, update your browser please...');
}
xmlDoc.async=false; //同步,防止后面程序处理时遇到文件还没加载完成出现的错误,故同步等XML文件加载完再做后面处理
xmlDoc.load(xmlFileName); //加载XML

2. JS读取XML文件节点

在加载XML文件之后就是读取XML文件的节点了,可以使用 DOM 相应的方法,对 MS IE 其它浏览器的读法相近,例如:

例如下的XML文件结构:

<visiter>
  <area areaid="shenzhen">
    <areaname>shenzhen</areaname>
    <user userid="001">
      <name>shenzhenNBA</name>
      <sex>man</sex>
    </user>
  </area>
  <area areaid="shanghai">
    <areaname>shenzhen</areaname>
    <user userid="002">
      <name>xiaoming</name>
      <sex>woman</sex>
    </user>
    <user userid="003">
      <name>zhangsan</name>
      <sex>man</sex>
    </user>
  </area>
</visiter>
//JS读取 XML 文件中的 area 节点的方式如下:
var nodeList= xmlDoc.documentElement.getElementsByTagName("area"); // IE
for(var i=0;i<nodeList.length;i++){
  //...遍历操作...
}
var nodeList=xmlDoc.getElementsByTagName("area"); // 非IE
for(var i=0;i<nodeList.length;i++){
  //...遍历操作...
}

还有部分读取节点的方法:

//MS IE
node.text ;   //读取node节点的文本值
node.childNodes[i].text ;  //读取 node 下的第 i 个[直接下一级]子节点的文本
node.getAttribute("attributeName") ;   //读取 node 节点的属性名称为 attributeName 的属性值
//还有其他的方法等, 可以网上搜索
//非 MS IE
node.nodeValue ;   //读取node节点的文本值
node.childNodes[i].nodeValue ;  //读取 node 下的第 i 个[直接下一级]子节点的文本
node.getAttribute("attributeName") ;   //读取 node 节点的属性名称为 attributeName 的属性值
//还有其他的方法等, 可以网上搜索
Javascript 相关文章推荐
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
Angular.js中控制器之间的传值详解
Apr 24 #Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 #Javascript
angularjs中的$eval方法详解
Apr 24 #Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 #Javascript
You might like
解析php中的escape函数
2013/06/29 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python 除法保留两位小数点的方法
2018/07/16 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
深入了解Python在HDA中的应用
2019/09/05 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
django ORM之values和annotate使用详解
2020/05/19 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
宣传普通话标语
2014/06/27 职场文书
本科应届生求职信
2014/08/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server