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