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 tools 系列 scrollable(2)
Sep 06 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
PassWord输入框代码分享
2016/06/07 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
webpack4简单入门实例
2018/09/06 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
餐饮总经理岗位职责
2014/03/07 职场文书
班主任评语大全
2014/04/26 职场文书
灰雀教学反思
2014/04/28 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android