DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JSON與XML的區別對比及案例應用
JSON與XML的區別對比及案例應用
編輯:關於JavaScript     

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中推廣還屬於初級階段。

3.XML和JSON的優缺點對比

(1).可讀性方面。

JSON和XML的數據可讀性基本相同,JSON和XML的可讀性可謂不相上下,一邊是建議的語法,一邊是規范的標簽形式,XML可讀性較好些。

(2).可擴展性方面。

XML天生有很好的擴展性,JSON當然也有,沒有什麼是XML能擴展,JSON不能的。

(3).編碼難度方面。

XML有豐富的編碼工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的編碼明顯比XML容易許多,即使不借助工具也能寫出JSON的代碼,可是要寫好XML就不太容易了。

(4).解碼難度方面。

XML的解析得考慮子節點父節點,讓人頭昏眼花,而JSON的解析難度幾乎為0。這一點XML輸的真是沒話說。

(5).流行度方面。

XML已經被業界廣泛的使用,而JSON才剛剛開始,但是在Ajax這個特定的領域,未來的發展一定是XML讓位於JSON。到時Ajax應該變成Ajaj(Asynchronous Javascript and JSON)了。

(6).解析手段方面。

JSON和XML同樣擁有豐富的解析手段。

(7).數據體積方面。

JSON相對於XML來講,數據的體積小,傳遞的速度更快些。

(8).數據交互方面。

JSON與JavaScript的交互更加方便,更容易解析處理,更好的數據交互。

(9).數據描述方面。

JSON對數據的描述性比XML較差。

(10).傳輸速度方面。

JSON的速度要遠遠快於XML。

4.XML與JSON數據格式比較

(1).關於輕量級和重量級

輕量級和重量級是相對來說的,那麼XML相對於JSON的重量級體現在哪呢?應該體現在解析上,XML目前設計了兩種解析方式:DOM和 SAX。

<1>.DOM

DOM是把一個數據交換格式XML看成一個DOM對象,需要把XML文件整個讀入內存,這一點上JSON和XML的原理是一樣的,但是XML要考慮父節點和子節點,這一點上JSON的解析難度要小很多,因為JSON構建於兩種結構:key/value,鍵值對的集合;值的有序集合,可理解為數組;

<2>.SAX

SAX不需要整個讀入文檔就可以對解析出的內容進行處理,是一種逐步解析的方法。程序也可以隨時終止解析。這樣,一個大的文檔就可以逐步的、一點一點的展現出來,所以SAX適合於大規模的解析。這一點,JSON目前是做不到得。

所以,JSON和XML的輕/重量級的區別在於:

JSON只提供整體解析方案,而這種方法只在解析較少的數據時才能起到良好的效果;

XML提供了對大規模數據的逐步解析方案,這種方案很適合於對大量數據的處理。

(2).關於數據格式編碼及解析難度

<1>.在編碼方面。

雖然XML和JSON都有各自的編碼工具,但是JSON的編碼要比XML簡單,即使不借助工具,也可以寫出JSON代碼,但要寫出好的XML代碼就有點困難;與XML一樣,JSON也是基於文本的,且它們都使用Unicode編碼,且其與數據交換格式XML一樣具有可讀性。

主觀上來看,JSON更為清晰且冗余更少些。JSON網站提供了對JSON語法的嚴格描述,只是描述較簡短。從總體來看,XML比較適合於標記文檔,而JSON卻更適於進行數據交換處理。

<2>.在解析方面。

在普通的web應用領域,開發者經常為XML的解析傷腦筋,無論是服務器端生成或處理XML,還是客戶端用 JavaScript 解析XML,都常常導致復雜的代碼,極低的開發效率。
實際上,對於大多數Web應用來說,他們根本不需要復雜的XML來傳輸數據,XML宣稱的擴展性在此就很少具有優勢,許多Ajax應用甚至直接返回HTML片段來構建動態Web頁面。和返回XML並解析它相比,返回HTML片段大大降低了系統的復雜性,但同時缺少了一定的靈活性。同XML或 HTML片段相比,數據交換格式JSON 提供了更好的簡單性和靈活性。在Web Serivice應用中,至少就目前來說XML仍有不可動搖的地位。

(3).實例比較

XML和JSON都使用結構化方法來標記數據,下面來做一個簡單的比較。

<1>.用XML表示中國部分省市數據如下:

<?xml version="1.0" encoding="utf-8" ?>
<country>
<name>中國</name>
<province>
<name>黑龍江</name>
<citys>
<city>哈爾濱</city>
<city>大慶</city>
</citys>   
</province>
<province>
<name>廣東</name>
<citys>
<city>廣州</city>
<city>深圳</city>
<city>珠海</city>
</citys>   
</province>
<province>
<name>台灣</name>
<citys>
 <city>台北</city>
 <city>高雄</city>
</citys> 
</province>
<province>
<name>新疆</name>
<citys>
<city>烏魯木齊</city>
</citys>
</province>
</country>

<2>.用JSON表示中國部分省市數據如下

var country =
{
name: "中國",
provinces: [
{ name: "黑龍江", citys: { city: ["哈爾濱", "大慶"]} },
{ name: "廣東", citys: { city: ["廣州", "深圳", "珠海"]} },
{ name: "台灣", citys: { city: ["台北", "高雄"]} },
{ name: "新疆", citys: { city: ["烏魯木齊"]} }
]
}

編碼的可讀性來說,XML有明顯的優勢,畢竟人類的語言更貼近這樣的說明結構。JSON讀起來更像一個數據塊,讀起來就比較費解了。不過,我們讀起來費解的語言,恰恰是適合機器閱讀,所以通過JSON的索引country.provinces[0].name就能夠讀取“黑龍江”這個值。

編碼的手寫難度來說,XML還是舒服一些,好讀當然就好寫。不過寫出來的字符JSON就明顯少很多。去掉空白制表以及換行的話,JSON就是密密麻麻的有用數據,而XML卻包含很多重復的標記字符。

案例運用:省的三級聯動

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/封裝Ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select name="provence" id="provence" onchange="chooseP(this.value)">
<option>湖北省</option>
</select>
<select name="city" id="city" onchange="chooseC(this.value)">
<option>武漢市</option>
</select>
<select name="area" id="area">
<option>江城區</option>
</select>
</body>
<script> 
objAJAX.getAjax("get", "xml/Provinces.xml", "", callBackOk, callBackFail, "");
function callBackOk(data) {
var provences = data.getElementsByTagName("Province");
/*<Province ID="1" ProvinceName="北京市">北京市</Province> */
for(var i = 0; i < provences.length; i++) {
var Potion = document.createElement("option"); //<option><option/>
Potion.value = provences[i].getAttribute("ID"); //把id傳給value
Potion.innerHTML = provences[i].innerHTML;
document.getElementById("provence").appendChild(Potion);
}
}
function callBackFail() {
alert("服務器出錯啦")
}
//市級聯動
function chooseP(id) {
objAJAX.getAjax("get", "xml/Cities.xml", "", callBackOkP, callBackFailP, "");
function callBackOkP(data) {
document.getElementById("city").innerHTML = "";
//alert( typeof data)
var citys = data.getElementsByTagName("City");
//alert(citys.length)
/*<City ID="1" CityName="北京市" PID="1" ZipCode="100000">北京市</City>*/
for(var i = 0; i < citys.length; i++){
var Coption = document.createElement("option"); //<option><option/>
Coption.value = citys[i].getAttribute("ID"); 
var PID = citys[i].getAttribute("PID");
if(id == PID) {
Coption.innerHTML = citys[i].innerHTML;
var dd=Coption.value;
document.getElementById("city").appendChild(Coption);
}
}
alert(Cvalue); 
chooseC(Cvalue);
}
function callBackFailP() {
alert("服務器出錯啦")
} 
}
//縣級聯動
function chooseC(id) {
objAJAX.getAjax("get", "xml/Districts.xml", "", callBackOkP, callBackFailP, "");
function callBackOkP(data) {
document.getElementById("area").innerHTML = "";
//alert( typeof data)
var districts = data.getElementsByTagName("District");
//alert(citys.length)
/* <District ID="1" DistrictName="東城區" CID="1">東城區</District>*/
for(var i = 0; i < districts.length; i++) {
var Xoption = document.createElement("option"); //<option><option/>
Xoption.value = districts[i].getAttribute("ID");
var CID = districts[i].getAttribute("CID");
if(id == CID) {
Xoption.innerHTML = districts[i].innerHTML;
document.getElementById("area").appendChild(Xoption);
}
}
}
function callBackFailP() {
alert("服務器出錯啦")
}
}
</script>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved