雖然XML已在不少應用程式中大顯身手,但它並不是十全十美的,特別是遇到AJAX應用的時候,XMLHttpRequest會檢查返回資料的MIME類型,如果是text/xml類型,XMLHttpRequest就會運行XML Parser來解析返回的文檔,並在記憶體中構建出對應的DOM樹,之後,你可以用JavaScript標準的DOM方法來操作DOM樹。由於眾所周知DOM的詬病,這顯然不是有效率的方法。另外一個問題是,如果你想使用JavaScript對象而不是直接用XML資料的話,你還得自己遍曆整個DOM樹來建立相應對象。
於是JSON出現在我們面前。
JSON提供了一種更適合AJAX應用的標準資料交換格式。JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。易於人閱讀和編寫。同時也易於機器解析和產生。
XML和JSON都利用結構化來標記資料。我們將通過一個地址簿的例子來展示它們之間的不同。
該地址簿用XML如下表示:
<?xml version='1.0' encoding='UTF-8'?> <card> <fullname>Sean Kelly</fullname> <org>SK Consulting</org> <emailaddrs> <address type='work'>kelly@seankelly.biz</address> <address type='home' pref='1'>kelly@seankelly.tv</address> </emailaddrs> <telephones> <tel type='work' pref='1'>+1 214 555 1212</tel> <tel type='fax'>+1 214 555 1213</tel> <tel type='mobile'>+1 214 555 1214</tel> </telephones> <addresses> <address type='work' format='us'>1234 Main St Springfield, TX 78080-1216</address> <address type='home' format='us'>5678 Main St Springfield, TX 78080-1316</address> </addresses> <urls> <address type='work'>http://seankelly.biz/ </address> <address type='home'>http://seankelly.tv/ </address> </urls> </card>
在JSON中,則是:
{ "fullname": "Sean Kelly", "org": "SK Consulting", "emailaddrs": [ {"type": "work", "value": "kelly@seankelly.biz"}, {"type": "home", "pref": 1, "value": "kelly@seankelly.tv"} ], "telephones": [ {"type": "work", "pref": 1, "value": "+1 214 555 1212"}, {"type": "fax", "value": "+1 214 555 1213"}, {"type": "mobile", "value": "+1 214 555 1214"} ], "addresses": [ {"type": "work", "format": "us", "value": "1234 Main StnSpringfield, TX 78080-1216"}, {"type": "home", "format": "us", "value": "5678 Main StnSpringfield, TX 78080-1316"} ], "urls": [ {"type": "work", "value": "http://seankelly.biz/"}, {"type": "home", "value": "http://seankelly.tv/"} ] }
JSON提供了兩種結構:
- 名/值對,其格式如下 {"名":"值", ...} 如:{"fullname": "Sean Kelly"},你可以把它理解為對象,或者雜湊表,字典等等。
- 數組,它是值的有序列表。一個數組以“[”開始,“]”結束。值之間使用“,”分隔。
JSON的值(value)可以是雙引號括起來的字串(string)、數值(number)、true、false、 null、對象(object)或者數組(array)。這些結構可以嵌套。
事實上大部分現代電腦語言都以某種形式支援它們。這使得一種資料格式在同樣基於這些結構的程式設計語言之間交換成為可能。
在AJAX中的XML與JSON之戰
在AJAX應用中,你可以用XMLHttpRequest讀取XML或者JSON檔案。一個典型的AJAX調用如下:
var req = new XMLHttpRequest(); req.open("GET", "http://localhost/addr?cardID=32", /*async*/true); req.onreadystatechange = myHandler; req.send(/*no params*/null);
Web伺服器應答的時候,處理子程式(例子中的myHandler)會反覆被調用。
處理地址簿的一個XML的程式片斷可能是:
function myHandler() { if (req.readyState == 4 /*complete*/) { // Update address field in a form with first street address var addrField = document.getElementById('addr'); var root = req.responseXML; var addrsElem = root.getElementsByTagName('addresses')[0]; var firstAddr = addrsElem.getElementsByTagName('address')[0]; var addrText = fistAddr.firstChild; var addrValue = addrText.nodeValue; addrField.value = addrValue; } }
注意:XMLHttpRequest自動建立了DOM樹,你可以通過responseXML屬性訪問樹並進行一系列處理,比如通過getElementsByTagName訪問元素。但對於複雜的XML,這是個煩瑣無味的活兒!
再看JSON:
function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr'); var card = eval('(' + req.responseText + ')'); addrField.value = card.addresses[0].value; } }
使用JSON的第一件事,你要手工解析JSON響應,但是請記住,JSON是JavaScript的子集,事實上你只需要調用一行 eval就可以完成解析工作。接下來訪問JSON的對象就和訪問任何JavaScript對象完全一樣:
card.addresses[0].value 即"1234 Main Stb &" card.addresses[0].type 即"work" card.addresses[1] 即home address; card.fullname 即 "Sean Kelly"
上千次的測試之後表明,JSON的速度幾乎是XML解析的10倍!
JSON要普及,這裡有兩個問題:
- 有多少伺服器願意提供JSON格式的輸出?隨著JSON的速度優勢得到大家的認可,相信會越來越多。
- 執行eval操作可能會導致安全性漏洞。所以最好還是使用一個JSON解析器,不過幸運的是。你可以在http://www.json.org找到一個。未來JSON的支援可能會被包括在ECMAScript標準中。