下面先是跟大家分別介紹了JSON與XML以及它們的區(qū)別比較，后又分享關(guān)于JavaScript實(shí)現(xiàn)XML與JSON互轉(zhuǎn)例子，希望這些例子能給你帶來(lái)幫助。
開發(fā)中有時(shí)候會(huì)遇到XML和JSON相互轉(zhuǎn)換，要求在JS中使用，網(wǎng)上找了好多，竟然每一個(gè)好用的，要么缺胳膊少腿，要么詞不達(dá)意，太沒天理了，果斷自己實(shí)現(xiàn)一個(gè)。
JSON與XML的區(qū)別比較
1.定義介紹
(1).XML定義
擴(kuò)展標(biāo)記語(yǔ)言 (Extensible Markup Language, XML) ，用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語(yǔ)言，可以用來(lái)標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對(duì)自己的標(biāo)記語(yǔ)言進(jìn)行定義的源語(yǔ)言。 XML使用DTD(document type definition)文檔類型定義來(lái)組織數(shù)據(jù);格式統(tǒng)一，跨平臺(tái)和語(yǔ)言，早已成為業(yè)界公認(rèn)的標(biāo)準(zhǔn)。
XML是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統(tǒng)一的方法來(lái)描述和交換獨(dú)立于應(yīng)用程序或供應(yīng)商的結(jié)構(gòu)化數(shù)據(jù)。
(2).JSON定義
JSON(JavaScript Object Notation)一種輕量級(jí)的數(shù)據(jù)交換格式，具有良好的可讀和便于快速編寫的特性?？稍诓煌脚_(tái)之間進(jìn)行數(shù)據(jù)交換。JSON采用兼容性很高的、完全獨(dú)立于語(yǔ)言文本格式，同時(shí)也具備類似于C語(yǔ)言的習(xí)慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)體系的行為。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一個(gè)子集。
2.XML和JSON優(yōu)缺點(diǎn)
(1).XML的優(yōu)缺點(diǎn)
<1>.XML的優(yōu)點(diǎn)
A.格式統(tǒng)一，符合標(biāo)準(zhǔn)；
B.容易與其他系統(tǒng)進(jìn)行遠(yuǎn)程交互，數(shù)據(jù)共享比較方便。
<2>.XML的缺點(diǎn)
A.XML文件龐大，文件格式復(fù)雜，傳輸占帶寬；
B.服務(wù)器端和客戶端都需要花費(fèi)大量代碼來(lái)解析XML，導(dǎo)致服務(wù)器端和客戶端代碼變得異常復(fù)雜且不易維護(hù)；
C.客戶端不同瀏覽器之間解析XML的方式不一致，需要重復(fù)編寫很多代碼；
D.服務(wù)器端和客戶端解析XML花費(fèi)較多的資源和時(shí)間。
(2).JSON的優(yōu)缺點(diǎn)
<1>.JSON的優(yōu)點(diǎn)：
A.數(shù)據(jù)格式比較簡(jiǎn)單，易于讀寫，格式都是壓縮的，占用帶寬?。?/P>
B.易于解析，客戶端JavaScript可以簡(jiǎn)單的通過eval()進(jìn)行JSON數(shù)據(jù)的讀??；
C.支持多種語(yǔ)言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服務(wù)器端語(yǔ)言，便于服務(wù)器端的解析；
D.在PHP世界，已經(jīng)有PHP-JSON和JSON-PHP出現(xiàn)了，偏于PHP序列化后的程序直接調(diào)用，PHP服務(wù)器端的對(duì)象、數(shù)組等能直接生成JSON格式，便于客戶端的訪問提取；
E.因?yàn)镴SON格式能直接為服務(wù)器端代碼使用，大大簡(jiǎn)化了服務(wù)器端和客戶端的代碼開發(fā)量，且完成任務(wù)不變，并且易于維護(hù)。
<2>.JSON的缺點(diǎn)
A.沒有XML格式這么推廣的深入人心和喜用廣泛，沒有XML那么通用性；
B.JSON格式目前在Web Service中推廣還屬于初級(jí)階段。
在Javascript中實(shí)現(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中實(shí)現(xiàn)XML和JSON相互轉(zhuǎn)換，希望本文所述對(duì)大家學(xué)習(xí)javascript有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試