JSON (JavaScript Object Notation)一種簡單的數(shù)據(jù)格式,比xml更輕巧。 JSON 是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。
JSON的規(guī)則很簡單: 對象是一個(gè)無序的“‘名稱/值’對”集合。一個(gè)對象以“{”(左括號)開始,“}”(右括號)結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”(冒號);“‘名稱/值’ 對”之間使用“,”(逗號)分隔。具體細(xì)節(jié)參考http://www.json.org/json-zh.html
舉個(gè)簡單的例子:
js 代碼
- function showJSON() {???
- var user =???
- ???? {???
- "username":"andy",???
- "age":20,???
- "info": { "tel": "123456", "cellphone": "98765"},???
- "address":???
- ???????????? [???
- ???????????????? {"city":"beijing","postcode":"222333"},???
- ???????????????? {"city":"newyork","postcode":"555666"}???
- ???????????? ]???
- ???? }???
-
- ???? alert(user.username);???
- ???? alert(user.age);???
- ???? alert(user.info.cellphone);???
- ???? alert(user.address[0].city);???
- ???? alert(user.address[0].postcode);???
- }??
這表示一個(gè)user對象,擁有username, age, info, address 等屬性。
同樣也可以用JSON來簡單的修改數(shù)據(jù),修改上面的例子
js 代碼
- function showJSON() {???
- var user =???
- ???? {???
- "username":"andy",???
- "age":20,???
- "info": { "tel": "123456", "cellphone": "98765"},???
- "address":???
- ???????????? [???
- ???????????????? {"city":"beijing","postcode":"222333"},???
- ???????????????? {"city":"newyork","postcode":"555666"}???
- ???????????? ]???
- ???? }???
-
- ???? alert(user.username);???
- ???? alert(user.age);???
- ???? alert(user.info.cellphone);???
- ???? alert(user.address[0].city);???
- ???? alert(user.address[0].postcode);???
-
- ???? user.username = "Tom";???
- ???? alert(user.username);???
- }??
JSON提供了json.js包,下載http://www.json.org/json.js 后,將其引入然后就可以簡單的使用object.toJSONString()轉(zhuǎn)換成JSON數(shù)據(jù)。
js 代碼
- function showCar() {???
- var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");???
- ???? alert(carr.toJSONString());???
- }???
-
- function Car(make, model, year, color)??????? {???
- this.make?? =?? make;???
- this.model?? =?? model;???
- this.year?? =?? year;???
- this.color?? =?? color;???
- }??
可以使用eval來轉(zhuǎn)換JSON字符到Object
js 代碼
- function myEval() {???
- var str = '{ "name": "Violet", "occupation": "character" }';???
- var obj = eval('(' + str + ')');???
- ???? alert(obj.toJSONString());???
- }??
或者使用parseJSON()方法
js 代碼
- function myEval() {???
- var str = '{ "name": "Violet", "occupation": "character" }';???
- var obj = str.parseJSON();???
- ???? alert(obj.toJSONString());???
- }??
下面使用prototype寫一個(gè)JSON的ajax例子。
先寫一個(gè)servlet (我的是servlet.ajax.JSONTest1.java)就寫一句話
java 代碼
- response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");?
再在頁面中寫一個(gè)ajax的請求
js 代碼
- function sendRequest() {???
- var url = "/MyWebApp/JSONTest1";???
- var mailAjax = new Ajax.Request(???
- ???????? url,???
- ???????? {???
- ???????????? method: 'get',???
- ???????????? onComplete: jsonResponse???
- ???????? }???
- ???? );???
- }???
-
- function jsonResponse(originalRequest) {???
- ???? alert(originalRequest.responseText);???
- var myobj = originalRequest.responseText.parseJSON();???
- ???? alert(myobj.name);???
- }??
prototype-1.5.1.js中提供了JSON的方法,String.evalJSON(), 可以不使用json.js, 修改上面的方法
js 代碼
- function jsonResponse(originalRequest) {???
- ???? alert(originalRequest.responseText);???
- var myobj = originalRequest.responseText.evalJSON(true);???
- ???? alert(myobj.name);???
- }??
JSON還提供了java的jar包 http://www.json.org/java/index.html API也很簡單,下面舉個(gè)例子
在javascript中填加請求參數(shù)
js 代碼
- function sendRequest() {???
- var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");???
- var pars = "car=" + carr.toJSONString();???
-
- var url = "/MyWebApp/JSONTest1";???
- var mailAjax = new Ajax.Request(???
- ???????? url,???
- ???????? {???
- ???????????? method: 'get',???
- ???????????? parameters: pars,???
- ???????????? onComplete: jsonResponse???
- ???????? }???
- ???? );???
- }??
使用JSON請求字符串就可以簡單的生成JSONObject并進(jìn)行解析,修改servlet添加JSON的處理(要使用json.jar)
java 代碼
- private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {???
- ???????? String s3 = request.getParameter("car");???
- try {???
- JSONObject jsonObj = new JSONObject(s3);???
- ???????????? System.out.println(jsonObj.getString("model"));???
- ???????????? System.out.println(jsonObj.getInt("year"));???
- ???????? } catch (JSONException e) {???
- ???????????? e.printStackTrace();???
- ???????? }???
- ???????? response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");???
- ???? }??
同樣可以使用JSONObject生成JSON字符串,修改servlet
java 代碼
- private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {???
- ???????? String s3 = request.getParameter("car");???
- try {???
- JSONObject jsonObj = new JSONObject(s3);???
- ???????????? System.out.println(jsonObj.getString("model"));???
- ???????????? System.out.println(jsonObj.getInt("year"));???
- ???????? } catch (JSONException e) {???
- ???????????? e.printStackTrace();???
- ???????? }???
-
- JSONObject resultJSON = new JSONObject();???
- try {???
- ???????????? resultJSON.append("name", "Violet")???
- ?????????????????????? .append("occupation", "developer")???
- ?????????????????????? .append("age", new Integer(22));???
- ???????????? System.out.println(resultJSON.toString());???
- ???????? } catch (JSONException e) {???
- ???????????? e.printStackTrace();???
- ???????? }???
- ???????? response.getWriter().print(resultJSON.toString());???
- ???? }??
js 代碼
- function jsonResponse(originalRequest) {???
- ???? alert(originalRequest.responseText);???
- var myobj = originalRequest.responseText.evalJSON(true);???
- ???? alert(myobj.name);???
- ???? alert(myobj.age);???
- }?
參考
http://www.json.org/js.html
http://www.tkk7.com/Jkallen/archive/2006/03/28/37905.html
http://www.json.org/
http://www.prototypejs.org/learn/json
http://www.json.org/java/index.html
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html
使用JSON
JSON也就是JavaScript Object Notation,是一個(gè)描述數(shù)據(jù)的輕量級語法。JSON的優(yōu)雅是因?yàn)樗荍avaScript語言的一個(gè)子集。接下來你將看到它為什么如此重要。首先,來比較一下JSON和XML語法。
JSON和XML都使用結(jié)構(gòu)化方法描述數(shù)據(jù)。例如一個(gè)地址簿應(yīng)用程序可以提供用來產(chǎn)生XML格式的地址卡的web服務(wù):
<?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有結(jié)構(gòu)化的嵌套數(shù)據(jù)元素,這一點(diǎn)和XML相似。JSON也是基于文本的,XML也是如此。兩者都使用Unicode。JSON和XML都很容易閱讀。主觀上,JSON更清晰,冗余更少。JSON WEB站點(diǎn)嚴(yán)格地描述了JSON語法,目前就是這樣的。它確實(shí)是一個(gè)簡單的小語言! XML確實(shí)適合標(biāo)記文檔,但是JSON是數(shù)據(jù)交互的理想格式。每個(gè)JSON文檔描述了一個(gè)這樣一個(gè)對象,該對象包含有:嵌套對象、數(shù)組、字符串、數(shù)字、布爾值或空值。
在這些地址卡例子代碼中,JSON版本是更輕量級的,只占用了682字節(jié)的空間,而XML版本需要744字節(jié)空間。盡管這不是一個(gè)可觀的節(jié)省。而實(shí)際的好處則來自解析過程。
XML對比JSON:地位喪失
通過使用XMLHttpRequest對象,可以從你的基于AJAX的應(yīng)用程序取得XML和JSON文件。典型的,交互代碼如下:
var req = new XMLHttpRequest();
req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);
req.onreadystatechange = myHandler;
req.send(/*no params*/null);
作為WEB服務(wù)器響應(yīng),你提供的處理器函數(shù)(myHandler函數(shù))被多次調(diào)用,為你提供提前終止事務(wù),更新進(jìn)度條等機(jī)會(huì)。通常的,只有在web請求完成以后才起作用:那時(shí),你就可以使用返回的數(shù)據(jù)了。
為了處理XML版本的地址卡數(shù)據(jù),myHandler的代碼如下:
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;
?? }
}
值得注意的是你不必解析XML文檔:XMLHttpRequest對象自動(dòng)地解析了,并使responseXML中的DOM樹可用。通過使用responseXML屬性,可以調(diào)用getElementsByTagName方法查找文檔的地址部分,你還可以使用第一個(gè)去找到它。然后,可以再次調(diào)用getElementsByTagName在地址部分查找第一個(gè)地址元素。這就取得了文檔的第一個(gè)DOM子節(jié)點(diǎn),就是一個(gè)文本節(jié)點(diǎn),并取得節(jié)點(diǎn)的值,這就是你想要的街道地址。最后,可以在表單域中顯示結(jié)果。
確實(shí)不是一個(gè)簡單的工作,現(xiàn)在,使用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響應(yīng)。但是,因?yàn)镴SON是JavaScript的一個(gè)子集,你可以使用JavaScript自己的編譯器來解析它,通過調(diào)用eval函數(shù)。解析JSON僅需要一行!此外,操縱JSON中的對象就像操縱其他JavaScript對象一樣。這顯然要比通過DOM樹來操縱簡單,例如:
card.addresses[0].value 是第一個(gè)街道地址, "1234 Main Stb &"
card.addresses[0].type 是地址類型, "work"
card.addresses[1] 是家庭地址對象
card.fullname 是card的名稱, "Sean Kelly"
如果更仔細(xì)觀察,你可能會(huì)發(fā)現(xiàn)XML格式中文檔至少有一個(gè)跟元素,card。這在JSON里是不存在的,為什么? 大概就是,如果你正在開發(fā)JavaScript來訪問Web服務(wù),你已經(jīng)知道你想要得到的。然而,你可以在JSON中這么使用:
{"card": {"fullname": ...}}
使用這個(gè)技術(shù),你的JSON文件總是以一個(gè)帶有單一命名屬性的對象開始,該屬性標(biāo)識了對象的種類。
JSON是快速可靠的嗎?
JSON提供輕量的小文檔,并且JSON在JavaScript更容易使用。XMLHttpRequest自動(dòng)為你解析了XML文檔,而你還要手工解析JSON文件,但是解析JSON比解析XML更慢么?作者通過幾千次的反復(fù)測試,使用XMLHttpRequest解析XML和解析JSON,結(jié)果是解析JSON比XML要快10倍!當(dāng)把AJAX當(dāng)作桌面應(yīng)用看待時(shí),速度是最重要的因素,很明顯,JSON更優(yōu)秀。
當(dāng)然,你不能總是控制服務(wù)器端來為AJAX程序產(chǎn)生數(shù)據(jù)。你還可以使用第三方服務(wù)器代替服務(wù)器提供XML格式的輸出。并且,如果服務(wù)器恰好提供JSON,你可以確定你真的想使用它嗎?
代碼中值得注意的是,你將響應(yīng)文本直接傳入到eval中。如果你控制著服務(wù)器,就可以這么做。如果不是,一個(gè)惡意服務(wù)器可以使你的瀏覽器執(zhí)行危險(xiǎn)操作。在這樣的情況下,你最好使用寫在JavaScript中的代碼來解析JSON。幸運(yùn)地,這已經(jīng)有了。
說到解析,Python愛好者可能注意到JSON不只是JavaScript的子集,它還是Python的一個(gè)子集。你可以在Python中直接執(zhí)行JSON,或者使用安全JSON解析代替。JSON.org網(wǎng)站列舉了許多常用JSON解析器。
服務(wù)器端的JSON
到現(xiàn)在為止,你或許將焦點(diǎn)注意在運(yùn)行在客戶瀏覽器中的基于AJAX的web應(yīng)用程序使用JSON。自然地,首先,JSON格式的數(shù)據(jù)必須在服務(wù)器端產(chǎn)生。幸運(yùn)地是,創(chuàng)建JSON或?qū)⑵渌嬖诘臄?shù)據(jù)轉(zhuǎn)換成JSON是相當(dāng)簡單的。一些WEB應(yīng)用程序框架,例如TurboGears,自動(dòng)包括對JSON輸出的支持。
此外商業(yè)WEB服務(wù)提供商也注意到了JSON。Yahoo最近創(chuàng)建了許多基于JSON的web服務(wù)。Yahoo的多種搜索服務(wù),履行計(jì)劃,del.icio.us,還有高速公路交通服務(wù)也都支持JSON輸出。毫無疑問,其他主要WEB服務(wù)提供商也將加入到對JSON的支持中。
總結(jié)
JSON的聰明在于它是JavaScript和Python的子集,使得它更易用,為AJAX提供高效的數(shù)據(jù)交互。它解析更快,比XML更易使用。JSON正成為現(xiàn)在“Web 2.0”的最強(qiáng)音。每個(gè)開發(fā)者,無論是標(biāo)準(zhǔn)桌面應(yīng)用程序或Web應(yīng)用程序,越來越注意到了它的簡單和便捷。我希望你能體會(huì)到在buzzword-compliant, Web-2.0-based, AJAX-enabled, 敏捷開發(fā)中應(yīng)用到JSON的樂趣。
文章來源:
http://x-spirit.spaces.live.com/Blog/cns!CC0B04AE126337C0!418.entry