JavaScript+java解析json資料詳細執行個體教程

關於json的概念及優勢，我們已經講過很多次了，不懂的同學可以搜尋一下，本文我們主要講JavaScript如何處理解析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, 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);    
    }  

    使用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'>kelly@5icool.org</address>
 <address type='home' pref='1'>kelly@5icool.org</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://www.5icool.org/</address>
 <address type='home'>http://www.5icool.org/</address>
 </urls>
 </card>

使用JSON, 形式如下:

{
    "fullname": "Sean Kelly",
    "org": "SK Consulting",
    "emailaddrs": [
    {"type": "work", "value": ""},
    {"type": "home", "pref": 1, "value": ""}
    ],
    "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://www.5icool.org/"},
    {"type": "home", "value": "http://www.5icool.org/"}
    ]
    }

如你所看到的，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://www.5icool.org/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的樂趣。