js處理xml文件方法示例詳解

更新時間：2023年08月21日 11:58:46 作者：黑蘿卜不黑

這篇文章主要為大家介紹了js處理xml文件方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

具體需求

最近遇到一個前端全權(quán)處理xml數(shù)據(jù)的需求，第一次處理這種問題有些愁人呀！經(jīng)過反復(fù)調(diào)研和技術(shù)論證終于解決了，這里做個小小記錄，分享給需要的小伙伴。

實(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;
}

通過以上兩個方法可以拿到xml文件中的數(shù)據(jù)DOM格式和字符串格式，這里親身實(shí)驗，DOM格式數(shù)據(jù)操作起來難度交大，需要寫的代碼比較復(fù)雜，所以這里選擇了處理字符串格式。

插件x2js

這里不得不提到一個特別棒的插件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)文章！

您可能感興趣的文章: