js處理xml文件方法示例詳解
具體需求
最近遇到一個(gè)前端全權(quán)處理xml數(shù)據(jù)的需求，第一次處理這種問題有些愁人呀！經(jīng)過反復(fù)調(diào)研和技術(shù)論證終于解決了，這里做個(gè)小小記錄，分享給需要的小伙伴。
實(shí)現(xiàn)方法
前端讀取xml文件的數(shù)據(jù)后，根據(jù)某些規(guī)則做數(shù)據(jù)界面展示，用戶可進(jìn)行輸入輸出操作，操作過后保存成xml數(shù)據(jù)格式的字符串。
使用XMLHttpRequest讀取本地xml文件
/**
* 獲取xml文件數(shù)據(jù)
* @param path 文件路徑
* @return DOM格式數(shù)據(jù)
*/
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文件數(shù)據(jù)
* @param path 文件路徑
* @return 字符串格式數(shù)據(jù)
*/
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;
// 轉(zhuǎn)為字符串形式的xml
var str = new XMLSerializer().serializeToString(xmlDoc)
return str;
}通過以上兩個(gè)方法可以拿到xml文件中的數(shù)據(jù)DOM格式和字符串格式，這里親身實(shí)驗(yàn)，DOM格式數(shù)據(jù)操作起來難度交大，需要寫的代碼比較復(fù)雜，所以這里選擇了處理字符串格式。
插件x2js
這里不得不提到一個(gè)特別棒的插件x2js，該庫提供 XML 到 JSON（JavaScript 對象）和反之亦然的 javascript 轉(zhuǎn)換功能。該庫非常小，沒有任何依賴關(guān)系。
// 導(dǎo)入插件
<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字符串?dāng)?shù)據(jù)轉(zhuǎn)成json格式
let data = x2js.xml_str2json(xmlStr)
// json格式轉(zhuǎn)成字符串
let str = x2js.json2xml_str(data)加載xml數(shù)據(jù)轉(zhuǎn)成成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數(shù)據(jù)，可以快速開發(fā)頁面布局，完成業(yè)務(wù)邏輯操作。完成數(shù)據(jù)操作后轉(zhuǎn)換成字符串格式。
以上就是js處理xml文件方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于js處理xml文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了 Bootstrap 3 瀏覽器兼容性問題及其對應(yīng)的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了webpack proxy 使用(代理的使用)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
使用BootStrapValidator完成前端輸入驗(yàn)證
JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例
JavaScript 對象深入學(xué)習(xí)總結(jié)(經(jīng)典)
JS實(shí)現(xiàn)“隱藏與顯示”功能(多種方法)
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
Javascript模塊化機(jī)制實(shí)現(xiàn)原理詳解