JS实现加载和读取XML文件的方法详解

 更新时间:2017年04月24日 12:06:32   作者:shenzhenNBA  
这篇文章主要介绍了JS实现加载和读取XML文件的方法,结合实例形式分析了javascript针对xml文件的加载与读取相关实现步骤与操作技巧,需要的朋友可以参考下

本文实例讲述了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 的属性值
//还有其他的方法等, 可以网上搜索

PS:这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用:

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

在线格式化XML/在线压缩XML
http://tools.jb51.net/code/xmlformat

XML在线压缩/格式化工具:
http://tools.jb51.net/code/xml_format_compress

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数据结构与算法技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • MySQL SUM Function函数使用详解

    MySQL SUM Function函数使用详解

    这篇文章主要为大家介绍了MySQL SUM Function函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • js中new一个对象的过程

    js中new一个对象的过程

    本文主要介绍了js中new一个对象的过程。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • electron的webview和内嵌网页通信的方法

    electron的webview和内嵌网页通信的方法

    在 Electron 的世界里,webview 标签相当于一个小盒子,里面可以装一个完整的网页,就像一个迷你浏览器,这篇文章主要介绍了electron的webview和内嵌网页如何通信,需要的朋友可以参考下
    2024-04-04
  • css transform 3D幻灯片特效实现步骤解读

    css transform 3D幻灯片特效实现步骤解读

    3D幻灯片特效想必大家以不在陌生至于表现形式一般都是拘泥于传统接下来为大家介绍下使用css3 transform配合js以及html实现3D幻灯片特效
    2013-03-03
  • 解读请求方式Method和请求类型Content-Type

    解读请求方式Method和请求类型Content-Type

    HTTP请求中,Content-Type头部用于指定请求体或响应体的类型,常见的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用请求方式包括Get、Post、Put、Delete
    2024-09-09
  • 为JavaScript添加重载函数的辅助方法

    为JavaScript添加重载函数的辅助方法

    大家都习惯了重载带来的便利。JavaScript有没有重载呢?有人会回答没有,因为函数会被覆盖;有人说有,我们可以模拟重载这 一操作。
    2010-07-07
  • js放大镜放大购物图片效果

    js放大镜放大购物图片效果

    这篇文章主要为大家详细介绍了基于JavaScript实现放大镜放大购物图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js 上传文件预览的简单实例

    js 上传文件预览的简单实例

    下面小编就为大家带来一篇js 上传文件预览的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • json数据处理技巧(字段带空格、增加字段、排序等等)

    json数据处理技巧(字段带空格、增加字段、排序等等)

    json数据处理技巧例如:正常取值、字段带空格、赋值、增加字段、排序、拷贝、数组添加和删除等,详细请参考本文或许对你有所帮助
    2013-06-06
  • 封装好的一个万能检测表单的方法

    封装好的一个万能检测表单的方法

    这篇文章主要介绍了一个封装好的万能检测表单的方法,非常的好用,使用也很方便,这里推荐给小伙伴们。
    2015-01-01

最新评论