JS互相轉換XML和JSON的方法

這次帶給大家JS互相轉換XML和JSON的方法，JS互相轉換XML和JSON的注意事項有哪些，下面就是實戰案例，一起來看一下。

開發中有時候會遇到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的優缺點

f35d6e602fd7d0f0edfa6f7d103c1b57. XML的優點
　　A.格式統一，符合標準；
　　B.容易與其他系統進行遠端交互，資料共享較方便。

2cc198a1d5eb0d3eb508d858c9f5cbdb.XML的缺點
　　A.XML檔案龐大，檔案格式複雜，傳輸佔頻寬;
　　B.伺服器端和客戶端都需要花費大量程式碼來解析XML，導致伺服器端和客戶端程式碼變得異常複雜且不易維護；
　　C.客戶端不同瀏覽器之間解析XML的方式不一致，需要重複編寫很多程式碼；
　　D.伺服器端和客戶端解析XML花費較多的資源和時間。

(2).JSON的優缺點

f35d6e602fd7d0f0edfa6f7d103c1b57.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格式能直接為伺服器端程式碼使用，大大簡化了伺服器端和客戶端的程式碼開發量，且完成任務不變，且易於維護。

2cc198a1d5eb0d3eb508d858c9f5cbdb.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("p");
        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 = ["&","<",">","\"","&#39;"];
JsonToXml.prototype.validChars = ["&","<",">",""","&#39;"];
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);
};

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

解析Json有哪些方法

JS判斷json有哪些方法

JSONP原理詳解以及案例分析

以上是JS互相轉換XML和JSON的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！