下面先是跟大家分別介紹了JSON與XML以及它們的區(qū)別比較，后又分享關(guān)于JavaScript實現(xiàn)XML與JSON互轉(zhuǎn)例子，希望這些例子能給你帶來幫助。

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

JSON與XML的區(qū)別比較

1.定義介紹

(1).XML定義

擴展標記語言 (Extensible Markup Language, XML) ，用于標記電子文件使其具有結(jié)構(gòu)性的標記語言，可以用來標記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對自己的標記語言進行定義的源語言。 XML使用DTD(document type definition)文檔類型定義來組織數(shù)據(jù);格式統(tǒng)一，跨平臺和語言，早已成為業(yè)界公認的標準。

XML是標準通用標記語言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統(tǒng)一的方法來描述和交換獨立于應用程序或供應商的結(jié)構(gòu)化數(shù)據(jù)。

(2).JSON定義

JSON(JavaScript Object Notation)一種輕量級的數(shù)據(jù)交換格式，具有良好的可讀和便于快速編寫的特性。可在不同平臺之間進行數(shù)據(jù)交換。JSON采用兼容性很高的、完全獨立于語言文本格式，同時也具備類似于C語言的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)體系的行為。這些特性使JSON成為理想的數(shù)據(jù)交換語言。

JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一個子集。

2.XML和JSON優(yōu)缺點

(1).XML的優(yōu)缺點

<1>.XML的優(yōu)點

A.格式統(tǒng)一，符合標準；

B.容易與其他系統(tǒng)進行遠程交互，數(shù)據(jù)共享比較方便。

<2>.XML的缺點

A.XML文件龐大，文件格式復雜，傳輸占帶寬；

B.服務器端和客戶端都需要花費大量代碼來解析XML，導致服務器端和客戶端代碼變得異常復雜且不易維護；

C.客戶端不同瀏覽器之間解析XML的方式不一致，需要重復編寫很多代碼；

D.服務器端和客戶端解析XML花費較多的資源和時間。

(2).JSON的優(yōu)缺點

<1>.JSON的優(yōu)點：

A.數(shù)據(jù)格式比較簡單，易于讀寫，格式都是壓縮的，占用帶寬??；

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

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

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

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

<2>.JSON的缺點

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

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

在Javascript中實現(xiàn)XML和JSON相互轉(zhuǎn)換

先看調(diào)用例子：

代碼如下:

<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轉(zhuǎn)換為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轉(zhuǎn)換為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);

};

以上就是為大家整理的在Javascript中實現(xiàn)XML和JSON相互轉(zhuǎn)換，希望本文所述對大家學習javascript有所幫助。