JSON與XML的區別比較及案例應用-js教程-PHP中文網

首頁

web前端

js教程

JSON與XML的區別比較及案例應用

高洛峰

Dec 07, 2016 am 10:29 AM

json

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的優缺點

.XML的優點

　　A.格式統一，符合標準；

　　A.格式統一與其他系統互動，資料共享比較方便。

.XML的缺點

　　A.XML檔案龐大，檔案格式複雜，傳輸佔頻寬；

　　B.伺服器端和客戶端都需要花費大量程式碼

　　B.伺服器端和客戶端都需要花費大量程式碼來解析XML端程式碼變得異常複雜且不易維護；

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

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

(2).JSON的優缺點

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

.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。

.DOM🎜

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

.SAX

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

所以，JSON和XML的輕/重量級的區別在於：

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

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

(2).關於資料格式編碼及解析難度

.在編碼方面。

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

主觀上來看，JSON更為清晰且冗餘更少。 JSON網站提供了JSON語法的嚴格描述，只是描述較短。從整體來看，XML比較適合標記文檔，而JSON更適合進行資料交換處理。

.在解析方面。

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

(3).實例比較

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

.用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>

.用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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

See all articles