js處理xml文件方法示例詳解
具體需求
最近遇到一個(gè)前端全權(quán)處理xml數(shù)據(jù)的需求,第一次處理這種問(wèn)題有些愁人呀!經(jīng)過(guò)反復(fù)調(diào)研和技術(shù)論證終于解決了,這里做個(gè)小小記錄,分享給需要的小伙伴。
實(shí)現(xiàn)方法
前端讀取xml文件的數(shù)據(jù)后,根據(jù)某些規(guī)則做數(shù)據(jù)界面展示,用戶可進(jìn)行輸入輸出操作,操作過(guò)后保存成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;
}通過(guò)以上兩個(gè)方法可以拿到xml文件中的數(shù)據(jù)DOM格式和字符串格式,這里親身實(shí)驗(yàn),DOM格式數(shù)據(jù)操作起來(lái)難度交大,需要寫(xiě)的代碼比較復(fù)雜,所以這里選擇了處理字符串格式。
插件x2js
這里不得不提到一個(gè)特別棒的插件x2js,該庫(kù)提供 XML 到 JSON(JavaScript 對(duì)象)和反之亦然的 javascript 轉(zhuǎn)換功能。該庫(kù)非常小,沒(méi)有任何依賴關(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);通過(guò)操作json數(shù)據(jù),可以快速開(kāi)發(fā)頁(yè)面布局,完成業(yè)務(wù)邏輯操作。完成數(shù)據(jù)操作后轉(zhuǎn)換成字符串格式。
以上就是js處理xml文件方法示例詳解的詳細(xì)內(nèi)容,更多關(guān)于js處理xml文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript簡(jiǎn)單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript簡(jiǎn)單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法,涉及JavaScript針對(duì)頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JS實(shí)現(xiàn)無(wú)限級(jí)網(wǎng)頁(yè)折疊菜單(類(lèi)似樹(shù)形菜單)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)無(wú)限級(jí)網(wǎng)頁(yè)折疊菜單(類(lèi)似樹(shù)形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷及樣式操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
javascript 關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
屏蔽HTML標(biāo)簽,支持多關(guān)鍵字(以空格間隔),關(guān)鍵字內(nèi)可含有特殊字符2010-09-09
JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
BootStrap數(shù)據(jù)表格實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家分享了BootStrap數(shù)據(jù)表格的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-09-09

