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显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
vue cli 全面解析
Feb 28 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
js+css实现红包雨效果
Jul 12 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
layui实现三级联动效果
Jul 26 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php时间计算相关问题小结
2016/05/09 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
星球大战与Python之间的那些事
2016/01/07 Python
python写入已存在的excel数据实例
2018/05/03 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Python实现Restful API的例子
2019/08/31 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
哪些情况下不应该使用索引
2015/07/20 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
社团招新策划书
2014/02/04 职场文书
函授药学自我鉴定
2014/02/07 职场文书
分家协议书
2014/04/21 职场文书
学子宴致辞大全
2015/07/27 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python