js处理xml文件方法示例详解

 更新时间:2023年08月21日 11:58:46   作者:黑萝卜不黑  
这篇文章主要为大家介绍了js处理xml文件方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

具体需求

最近遇到一个前端全权处理xml数据的需求,第一次处理这种问题有些愁人呀!经过反复调研和技术论证终于解决了,这里做个小小记录,分享给需要的小伙伴。

实现方法

前端读取xml文件的数据后,根据某些规则做数据界面展示,用户可进行输入输出操作,操作过后保存成xml数据格式的字符串。

使用XMLHttpRequest读取本地xml文件

/**
* 获取xml文件数据
* @param path 文件路径
* @return DOM格式数据
*/
function loadXML(path) {
  let xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  } else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",path,false);
  xmlhttp.send();
  return xmlhttp.responseXML;
}

使用XMLHttpRequest读取xml文件

获得字符串形式的xml

/**
* 获取xml文件数据
* @param path 文件路径
* @return 字符串格式数据
*/
function loadXMLDoc(path) {
  let xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  } else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",path,false);
  xmlhttp.send();
  // xml的document
  const xmlDoc = xmlhttp.responseXML;
  // 转为字符串形式的xml
  var str = new XMLSerializer().serializeToString(xmlDoc)
  return str;
}

通过以上两个方法可以拿到xml文件中的数据DOM格式和字符串格式,这里亲身实验,DOM格式数据操作起来难度交大,需要写的代码比较复杂,所以这里选择了处理字符串格式。

插件x2js

这里不得不提到一个特别棒的插件x2js,该库提供 XML 到 JSON(JavaScript 对象)和反之亦然的 javascript 转换功能。该库非常小,没有任何依赖关系。

// 导入插件
<script src="js/xml2json.js"></script>
let xmlStr= "<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>x2js</name>
    <comment></comment>
    <projects>
    </projects>
    <buildSpec>
    </buildSpec>
    <natures>
    </natures>
</projectDescription>
"
// 将xml字符串数据转成json格式
let data = x2js.xml_str2json(xmlStr)
// json格式转成字符串
let str = x2js.json2xml_str(data)

加载xml数据转成成json格式

  function loadXMLDoc(dname) {
        if (window.XMLHttpRequest) {
            xhttp=new XMLHttpRequest();
        }
        else {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    }
    var xmlDoc = loadXMLDoc("test.xml");
    var x2js = new X2JS();
    var jsonObj = x2js.xml2json(xmlDoc);

通过操作json数据,可以快速开发页面布局,完成业务逻辑操作。完成数据操作后转换成字符串格式。

以上就是js处理xml文件方法示例详解的详细内容,更多关于js处理xml文件的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序HTTP请求从0到1封装

    微信小程序HTTP请求从0到1封装

    这篇文章主要给大家介绍了关于微信小程序HTTP请求从0到1封装的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • JavaScript简单遍历DOM对象所有属性的实现方法

    JavaScript简单遍历DOM对象所有属性的实现方法

    这篇文章主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Javascript中的prototype与继承

    Javascript中的prototype与继承

    本文主要介绍了Javascript中的prototype与继承,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 用js编写留言板

    用js编写留言板

    这篇文章主要为大家详细介绍了用js编写留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    这篇文章主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript 关键字高亮显示实现代码

    javascript 关键字高亮显示实现代码

    屏蔽HTML标签,支持多关键字(以空格间隔),关键字内可含有特殊字符
    2010-09-09
  • JavaScript之Array常见的方法详解

    JavaScript之Array常见的方法详解

    这篇文章主要为大家介绍了JavaScript之Array常见的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助V
    2021-11-11
  • JavaScript实现DOM对象选择器

    JavaScript实现DOM对象选择器

    这篇文章主要为大家详细介绍了JavaScript实现DOM对象选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • BootStrap数据表格实例代码

    BootStrap数据表格实例代码

    本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
    2017-09-09
  • 关于JavaScript命名空间的一些心得

    关于JavaScript命名空间的一些心得

    这篇文章主要介绍了关于JavaScript命名空间的一些心得,分别给出了顶级、多级命名空间的例子,需要的朋友可以参考下
    2014-06-06

最新评论