最近遇到一个前端全权处理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，该库提供 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数据，可以快速开发页面布局，完成业务逻辑操作。完成数据操作后转换成字符串格式。