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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
vue父子组件间引用之$parent、$children
May 20 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连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP排序算法类实例
2015/06/17 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
浅谈Python中数据解析
2015/05/05 Python
简介Django中内置的一些中间件
2015/07/24 Python
python安装twisted的问题解析
2018/08/21 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Django在Model保存前记录日志实例
2020/05/14 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
政治学求职信
2014/06/03 职场文书
报名委托书
2015/01/29 职场文书
毕业生个人总结
2015/02/28 职场文书
专家推荐信怎么写
2015/03/25 职场文书
英语演讲开场白
2015/05/29 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python