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文件的资料请关注脚本之家其它相关文章!

相关文章

  • Bootstrap 3浏览器兼容性问题及解决方案

    Bootstrap 3浏览器兼容性问题及解决方案

    这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • webpack proxy 使用(代理的使用)

    webpack proxy 使用(代理的使用)

    这篇文章主要介绍了webpack proxy 使用(代理的使用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JS 拼图游戏 面向对象,注释完整。

    JS 拼图游戏 面向对象,注释完整。

    原创的JS拼图游戏,面向对象,注释完整。作者 sunxing007
    2009-06-06
  • 使用BootStrapValidator完成前端输入验证

    使用BootStrapValidator完成前端输入验证

    这篇文章主要为大家详细介绍了使用BootStrapValidator来完成前端输入验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript隐式类型转换代码实例

    JavaScript隐式类型转换代码实例

    这篇文章主要介绍了JavaScript隐式类型转换代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript 对象深入学习总结(经典)

    JavaScript 对象深入学习总结(经典)

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢?本篇文章给大家分享javascript对象深入学习总结,小伙伴们跟着小编一起深入学习吧
    2015-09-09
  • JS实现“隐藏与显示”功能(多种方法)

    JS实现“隐藏与显示”功能(多种方法)

    这篇文章主要介绍了JS实现“隐藏与显示”功能的多种方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • JavaScript 读URL参数增强改进版版

    JavaScript 读URL参数增强改进版版

    网上有不少JavaScript 读 URL 参数的函数,但没考虑到 URL 中带 # 符的情况,我的可以处理这种情况,并使用了点对象写法,优化了些性能。
    2008-10-10
  • JS中惰性函数的使用小结

    JS中惰性函数的使用小结

    JS中的惰性函数(Lazy Function)其实是一种非常巧妙的性能优化设计模式,就是利用js的动态重写函数的思想,用第一次调用时微乎其微的代价,换取了后续所有调用的极致性能,下面就来详细的介绍一下
    2026-05-05
  • Javascript模块化机制实现原理详解

    Javascript模块化机制实现原理详解

    这篇文章主要介绍了Javascript模块化机制实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04

最新评论