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 相关文章推荐
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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中实现记住密码自动登录的代码
2011/03/02 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python实现停车管理系统
2018/11/30 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python 绘制可视化折线图
2020/07/22 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
用python修改excel表某一列内容的操作方法
2021/06/11 Python