如何在JS中實現相互轉換XML和JSON

2019-11-20 09:26:57

字體：大中小

來源：轉載

供稿：網友

開發中有時候會遇到XML和JSON相互轉換，要求在JS中使用，網上找了好多，竟然每一個好用的，要么缺胳膊少腿，要么詞不達意，太沒天理了，果斷自己實現一個。

JSON與XML的區別比較

1.定義介紹

(1).XML定義

擴展標記語言 (Extensible Markup Language, XML) ，用于標記電子文件使其具有結構性的標記語言，可以用來標記數據、定義數據類型，是一種允許用戶對自己的標記語言進行定義的源語言。 XML使用DTD(document type definition)文檔類型定義來組織數據;格式統一，跨平臺和語言，早已成為業界公認的標準。
XML是標準通用標記語言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統一的方法來描述和交換獨立于應用程序或供應商的結構化數據。

(2).JSON定義

JSON(JavaScript Object Notation)一種輕量級的數據交換格式，具有良好的可讀和便于快速編寫的特性?？稍诓煌脚_之間進行數據交換。JSON采用兼容性很高的、完全獨立于語言文本格式，同時也具備類似于C語言的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)體系的行為。這些特性使JSON成為理想的數據交換語言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一個子集。

2.XML和JSON優缺點

(1).XML的優缺點

<1>.XML的優點
　　A.格式統一，符合標準；
　　B.容易與其他系統進行遠程交互，數據共享比較方便。

<2>.XML的缺點
　　A.XML文件龐大，文件格式復雜，傳輸占帶寬；
　　B.服務器端和客戶端都需要花費大量代碼來解析XML，導致服務器端和客戶端代碼變得異常復雜且不易維護；
　　C.客戶端不同瀏覽器之間解析XML的方式不一致，需要重復編寫很多代碼；
　　D.服務器端和客戶端解析XML花費較多的資源和時間。

(2).JSON的優缺點

<1>.JSON的優點：
　　A.數據格式比較簡單，易于讀寫，格式都是壓縮的，占用帶寬??；

　　B.易于解析，客戶端JavaScript可以簡單的通過eval()進行JSON數據的讀??；

　　C.支持多種語言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服務器端語言，便于服務器端的解析；

　　D.在PHP世界，已經有PHP-JSON和JSON-PHP出現了，偏于PHP序列化后的程序直接調用，PHP服務器端的對象、數組等能直接生成JSON格式，便于客戶端的訪問提??；

　　E.因為JSON格式能直接為服務器端代碼使用，大大簡化了服務器端和客戶端的代碼開發量，且完成任務不變，并且易于維護。

<2>.JSON的缺點

　　A.沒有XML格式這么推廣的深入人心和喜用廣泛，沒有XML那么通用性；

　　B.JSON格式目前在Web Service中推廣還屬于初級階段。

在Javascript中實現XML和JSON相互轉換

先看調用例子：

復制代碼代碼如下:

<viewport id="menuPane" layout="border">
    <panel region="center" border="0" layout="border">
        <tbar>
            <toolbar text="XXXX">
                <menu>
                    <text text="11">
                    </text>
                    <text text="22">
                    </text>
                    <text text="33">
                    </text>
                </menu>
            </toolbar>
            <toolbar text="XXXX">
                <menu>
                    <text text="44">
                    </text>
                    <text text="55">
                    </text>
                    <menu>
                        <text text="6 6">
                        </text>
                    </menu>
                    <text text="77">
                    </text>
                </menu>
            </toolbar>
        </tbar>
    </panel>
</viewport>
var xmlParser = new XmlToJson();
var json = xmlParser.parse(xml);
console.log( JSON.stringify(json) );
var jsonParser = new JsonToXml();
var xml = jsonParser.parse(json);
console.log( xml );

XML轉換為JSON：

復制代碼代碼如下:

function XmlToJson() {
}
XmlToJson.prototype.setXml = function(xml) {
    if(xml && typeof xml == "string") {
        this.xml = document.createElement("div");
        this.xml.innerHTML = xml;
        this.xml = this.xml.getElementsByTagName("*")[0];
    }
    else if(typeof xml == "object"){
        this.xml = xml;
    }
};
XmlToJson.prototype.getXml = function() {
    return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
    this.setXml(xml);
    return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
    if (xml.nodeType != 1) {
        return null;
    }
    var obj = {};
    obj.xtype = xml.nodeName.toLowerCase();
    var nodeValue = (xml.textContent || "").replace(/(/r|/n)/g, "").replace(/^/s+|/s+$/g, "");
    
    if(nodeValue && xml.childNodes.length == 1) {
        obj.text = nodeValue;
    }
    if (xml.attributes.length > 0) {
        for (var j = 0; j < xml.attributes.length; j++) {
            var attribute = xml.attributes.item(j);
            obj[attribute.nodeName] = attribute.nodeValue;
        }
    }
    if (xml.childNodes.length > 0) {
        var items = [];
        for(var i = 0; i < xml.childNodes.length; i++) {
            var node = xml.childNodes.item(i);
            var item = this.convert(node);
            if(item) {
                items.push(item);
            }
        }
        if(items.length > 0) {
            obj.items = items;
        }
    }
    return obj;
};

JSON轉換為XML：

復制代碼代碼如下:

function JsonToXml() {
 this.result = [];
}
JsonToXml.prototype.spacialChars = ["&","<",">","/"","'"];
JsonToXml.prototype.validChars = ["&","<",">",""","'"];
JsonToXml.prototype.toString = function(){
 return this.result.join("");
};
JsonToXml.prototype.replaceSpecialChar = function(s){
    for(var i=0;i<this.spacialChars.length;i++){
        s=s.replace(new RegExp(this.spacialChars[i],"g"),this.validChars[i]);
    }
    return s;
};
JsonToXml.prototype.appendText = function(s){
    s = this.replaceSpecialChar(s);
    this.result.push(s);
};
JsonToXml.prototype.appendAttr = function(key, value){
    this.result.push(" "+ key +"=/""+ value +"/"");
};
JsonToXml.prototype.appendFlagBeginS = function(s){
 this.result.push("<"+s);
};
JsonToXml.prototype.appendFlagBeginE = function(){
 this.result.push(">");
};
JsonToXml.prototype.appendFlagEnd = function(s){
 this.result.push("</"+s+">");
};
JsonToXml.prototype.parse = function(json){
 this.convert(json);
 return this.toString();
};
JsonToXml.prototype.convert = function(obj) {
 var nodeName = obj.xtype || "item";
 this.appendFlagBeginS(nodeName);
 var arrayMap = {};
 for(var key in obj) {
  var item = obj[key];
  if(key == "xtype") {
   continue;
  }
  if(item.constructor == String) {
   this.appendAttr(key, item);
  }
  if(item.constructor == Array) {
   arrayMap[key] = item;
  }
 }
 this.appendFlagBeginE();
 for(var key in arrayMap) {
  var items = arrayMap[key];
  for(var i=0;i<items.length;i++) {
   this.convert(items[i]);
  }
 }
 this.appendFlagEnd(nodeName);
};