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 相关文章推荐
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
学习ExtJS form布局
2009/10/08 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python正则表达式使用经典实例
2016/06/21 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
项目管理计划书
2014/01/09 职场文书
奖励通知
2015/04/22 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js