JSON是一種簡單的數據格式，比xml更輕巧，在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包，下面有個示例，大家可以參考下
JSON （JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。 JSON的規則很簡單： 對象是一個無序的“‘名稱/值'對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值' 對”之間使用“,”（逗號）分隔。具體細節參考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來簡單的修改數據，修改上面的例子 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()轉換成JSON數據。 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來轉換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中填加請求參數 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，是一個描述數據的輕量級語法。JSON的優雅是因為它是JavaScript語言的一個子集。接下來你將看到它為什麼如此重要。首先，來比較一下JSON和XML語法。 JSON和XML都使用結構化方法描述數據。例如一個地址簿應用程序可以提供用來產生XML格式的地址卡的web服務： 代碼如下: <?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有結構化的嵌套數據元素，這一點和XML相似。JSON也是基於文本的，XML也是如此。兩者都使用Unicode。JSON和 XML都很容易閱讀。主觀上，JSON更清晰，冗余更少。JSON WEB站點嚴格地描述了JSON語法，目前就是這樣的。它確實是一個簡單的小語言！ XML確實適合標記文檔，但是JSON是數據交互的理想格式。每個JSON文檔描述了一個這樣一個對象，該對象包含有：嵌套對象、數組、字符串、數字、布爾值或空值。 在這些地址卡例子代碼中，JSON版本是更輕量級的，只占用了682字節的空間，而XML版本需要744字節空間。盡管這不是一個可觀的節省。而實際的好處則來自解析過程。 XML對比JSON：地位喪失 通過使用XMLHttpRequest對象，可以從你的基於AJAX的應用程序取得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服務器響應，你提供的處理器函數（myHandler函數）被多次調用，為你提供提前終止事務，更新進度條等機會。通常的，只有在web請求完成以後才起作用：那時，你就可以使用返回的數據了。 為了處理XML版本的地址卡數據，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屬性，可以調用getElementsByTagName方法查找文檔的地址部分，你還可以使用第一個去找到它。然後，可以再次調 用getElementsByTagName在地址部分查找第一個地址元素。這就取得了文檔的第一個DOM子節點，就是一個文本節點，並取得節點的值，這 就是你想要的街道地址。最後，可以在表單域中顯示結果。 確實不是一個簡單的工作，現在，使用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是JavaScript的一個子集，你可以使用JavaScript自己的編譯器來解析它，通過調用eval函數。解析JSON僅需要一行！此外，操縱JSON中的對象就像操縱其他JavaScript對象一樣。這顯然要比通過DOM樹來操縱簡 單，例如： card.addresses[0].value 是第一個街道地址, "1234 Main Stb &" card.addresses[0].type 是地址類型, "work" card.addresses[1] 是家庭地址對象 card.fullname 是card的名稱, "Sean Kelly" 如果更仔細觀察，你可能會發現XML格式中文檔至少有一個跟元素，card。這在JSON裡是不存在的，為什麼？ 大概就是，如果你正在開發JavaScript來訪問Web服務，你已經知道你想要得到的。然而，你可以在JSON中這麼使用： {"card": {"fullname": ...}} 使用這個技術，你的JSON文件總是以一個帶有單一命名屬性的對象開始，該屬性標識了對象的種類。 JSON是快速可靠的嗎？ JSON 提供輕量的小文檔，並且JSON在JavaScript更容易使用。XMLHttpRequest自動為你解析了XML文檔，而你還要手工解析JSON文 件，但是解析JSON比解析XML更慢麼？作者通過幾千次的反復測試，使用XMLHttpRequest解析XML和解析JSON，結果是解析JSON比 XML要快10倍！當把AJAX當作桌面應用看待時，速度是最重要的因素，很明顯，JSON更優秀。 當然，你不能總是控制服務器端來為AJAX程序產生數據。你還可以使用第三方服務器代替服務器提供XML格式的輸出。並且，如果服務器恰好提供JSON，你可以確定你真的想使用它嗎? 代碼中值得注意的是，你將響應文本直接傳入到eval中。如果你控制著服務器，就可以這麼做。如果不是，一個惡意服務器可以使你的浏覽器執行危險操作。在這樣的情況下，你最好使用寫在JavaScript中的代碼來解析JSON。幸運地，這已經有了。 說到解析，Python愛好者可能注意到JSON不只是JavaScript的子集，它還是Python的一個子集。你可以在Python中直接執行JSON，或者使用安全JSON解析代替。JSON.org網站列舉了許多常用JSON解析器。 服務器端的JSON 到 現在為止，你或許將焦點注意在運行在客戶浏覽器中的基於AJAX的web應用程序使用JSON。自然地，首先，JSON格式的數據必須在服務器端產生。幸 運地是，創建JSON或將其他存在的數據轉換成JSON是相當簡單的。一些WEB應用程序框架，例如TurboGears，自動包括對JSON輸出的支 持。 此外商業WEB服務提供商也注意到了JSON。Yahoo最近創建了許多基於JSON的web服務。Yahoo的多種搜索服務，履行計劃，del.icio.us，還有高速公路交通服務也都支持JSON輸出。毫無疑問，其他主要WEB服務提供商也將加入到對JSON的支持中。 總結 JSON 的聰明在於它是JavaScript和Python的子集，使得它更易用，為AJAX提供高效的數據交互。它解析更快，比XML更易使用。JSON正成為 現在“Web 2.0”的最強音。每個開發者，無論是標准桌面應用程序或Web應用程序，越來越注意到了它的簡單和便捷。我希望你能體會到在buzzword- compliant, Web-2.0-based, AJAX-enabled, 敏捷開發中應用到JSON的樂趣。