JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。
JSON的規(guī)則很簡單： 對象是一個無序的“‘名稱/值'對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結(jié)束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值' 對”之間使用“,”（逗號）分隔。具體細節(jié)參考http://www.json.org/json-zh.html
舉個簡單的例子：
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, 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寫一個JSON的ajax例子。
先寫一個servlet (我的是servlet.ajax.JSONTest1.java)就寫一句話
java 代碼
response.getWriter().print("{ /"name/": /"Violet/", /"occupation/": /"character/" }");
再在頁面中寫一個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也很簡單，下面舉個例子
在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并進行解析,修改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.blogjava.net/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，是一個描述數(shù)據(jù)的輕量級語法。JSON的優(yōu)雅是因為它是JavaScript語言的一個子集。接下來你將看到它為什么如此重要。首先，來比較一下JSON和XML語法。
JSON和XML都使用結(jié)構(gòu)化方法描述數(shù)據(jù)。例如一個地址簿應(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'>
[email protected]</address>
<address type='home' pref='1'>
[email protected]</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": "
[email protected]"},
{"type": "home", "pref": 1, "value": "
[email protected]"}
],
"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ù)元素，這一點和XML相似。JSON也是基于文本的，XML也是如此。兩者都使用Unicode。JSON和 XML都很容易閱讀。主觀上，JSON更清晰，冗余更少。JSON WEB站點嚴(yán)格地描述了JSON語法，目前就是這樣的。它確實是一個簡單的小語言！ XML確實適合標(biāo)記文檔，但是JSON是數(shù)據(jù)交互的理想格式。每個JSON文檔描述了一個這樣一個對象，該對象包含有：嵌套對象、數(shù)組、字符串、數(shù)字、布爾值或空值。
在這些地址卡例子代碼中，JSON版本是更輕量級的，只占用了682字節(jié)的空間，而XML版本需要744字節(jié)空間。盡管這不是一個可觀的節(jié)省。而實際的好處則來自解析過程。
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ù)，更新進度條等機會。通常的，只有在web請求完成以后才起作用：那時，你就可以使用返回的數(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對象自動地解析了，并使responseXML中的DOM樹可用。通過使用 responseXML屬性，可以調(diào)用getElementsByTagName方法查找文檔的地址部分，你還可以使用第一個去找到它。然后，可以再次調(diào) 用getElementsByTagName在地址部分查找第一個地址元素。這就取得了文檔的第一個DOM子節(jié)點，就是一個文本節(jié)點，并取得節(jié)點的值，這 就是你想要的街道地址。最后，可以在表單域中顯示結(jié)果。
確實不是一個簡單的工作，現(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)。但是，因為JSON是JavaScript的一個子集，你可以使用JavaScript自己的編譯器來解析它，通過調(diào)用eval函數(shù)。解析JSON僅需要一行！此外，操縱JSON中的對象就像操縱其他JavaScript對象一樣。這顯然要比通過DOM樹來操縱簡 單，例如：
card.addresses[0].value 是第一個街道地址, "1234 Main Stb &"
card.addresses[0].type 是地址類型, "work"
card.addresses[1] 是家庭地址對象
card.fullname 是card的名稱, "Sean Kelly"
如果更仔細觀察，你可能會發(fā)現(xiàn)XML格式中文檔至少有一個跟元素，card。這在JSON里是不存在的，為什么？ 大概就是，如果你正在開發(fā)JavaScript來訪問Web服務(wù)，你已經(jīng)知道你想要得到的。然而，你可以在JSON中這么使用：
{"card": {"fullname": ...}}
使用這個技術(shù)，你的JSON文件總是以一個帶有單一命名屬性的對象開始，該屬性標(biāo)識了對象的種類。
JSON是快速可靠的嗎？
JSON 提供輕量的小文檔，并且JSON在JavaScript更容易使用。XMLHttpRequest自動為你解析了XML文檔，而你還要手工解析JSON文 件，但是解析JSON比解析XML更慢么？作者通過幾千次的反復(fù)測試，使用XMLHttpRequest解析XML和解析JSON，結(jié)果是解析JSON比 XML要快10倍！當(dāng)把AJAX當(dāng)作桌面應(yīng)用看待時，速度是最重要的因素，很明顯，JSON更優(yōu)秀。
當(dāng)然，你不能總是控制服務(wù)器端來為AJAX程序產(chǎn)生數(shù)據(jù)。你還可以使用第三方服務(wù)器代替服務(wù)器提供XML格式的輸出。并且，如果服務(wù)器恰好提供JSON，你可以確定你真的想使用它嗎?
代碼中值得注意的是，你將響應(yīng)文本直接傳入到eval中。如果你控制著服務(wù)器，就可以這么做。如果不是，一個惡意服務(wù)器可以使你的瀏覽器執(zhí)行危險操作。在這樣的情況下，你最好使用寫在JavaScript中的代碼來解析JSON。幸運地，這已經(jīng)有了。
說到解析，Python愛好者可能注意到JSON不只是JavaScript的子集，它還是Python的一個子集。你可以在Python中直接執(zhí)行JSON，或者使用安全JSON解析代替。JSON.org網(wǎng)站列舉了許多常用JSON解析器。
服務(wù)器端的JSON
到 現(xiàn)在為止，你或許將焦點注意在運行在客戶瀏覽器中的基于AJAX的web應(yīng)用程序使用JSON。自然地，首先，JSON格式的數(shù)據(jù)必須在服務(wù)器端產(chǎn)生。幸 運地是，創(chuàng)建JSON或?qū)⑵渌嬖诘臄?shù)據(jù)轉(zhuǎn)換成JSON是相當(dāng)簡單的。一些WEB應(yīng)用程序框架，例如TurboGears，自動包括對JSON輸出的支 持。
此外商業(yè)WEB服務(wù)提供商也注意到了JSON。Yahoo最近創(chuàng)建了許多基于JSON的web服務(wù)。Yahoo的多種搜索服務(wù)，履行計劃，del.icio.us，還有高速公路交通服務(wù)也都支持JSON輸出。毫無疑問，其他主要WEB服務(wù)提供商也將加入到對JSON的支持中。
總結(jié)
JSON 的聰明在于它是JavaScript和Python的子集，使得它更易用，為AJAX提供高效的數(shù)據(jù)交互。它解析更快，比XML更易使用。JSON正成為 現(xiàn)在“Web 2.0”的最強音。每個開發(fā)者，無論是標(biāo)準(zhǔn)桌面應(yīng)用程序或Web應(yīng)用程序，越來越注意到了它的簡單和便捷。我希望你能體會到在buzzword- compliant, Web-2.0-based, AJAX-enabled, 敏捷開發(fā)中應(yīng)用到JSON的樂趣。PS：關(guān)于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.VeVB.COm/code/json
JSON在線格式化工具：
http://tools.VeVB.COm/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具：
http://tools.VeVB.COm/code/json_yasuo_trans
C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具：
http://tools.VeVB.COm/code/ccode_html_css_json
