JSON 數(shù)據(jù)解析過(guò)程詳解

JSON 數(shù)據(jù)解析

在JavaScript中將JSON的字符串解析成JSON數(shù)據(jù)格式，一般有兩種方式：

一種為使用eval()函數(shù)。
使用Function對(duì)象來(lái)進(jìn)行返回解析。
使用eval函數(shù)來(lái)解析，jquery的each方法來(lái)遍歷
用JQuery解析JSON數(shù)據(jù)的方法，作為JQuery異步請(qǐng)求的傳輸對(duì)象，JQuery請(qǐng)求后返回的結(jié)果是json對(duì)象，這里考慮的都是服務(wù)器返回JSON形式的字符串的形式，對(duì)于利用JSONObject等插件封裝的JSON對(duì)象，與此亦是大同小異，這里不再做說(shuō)明。

這里首先給出JSON字符串集，字符串集如下：

var data = "
{
root:
[
    {name:'1',value:'0'},
    {name:'6101',value:'北京市'},
    {name:'6102',value:'天津市'},
    {name:'6103',value:'上海市'},
    {name:'6104',value:'重慶市'},
]
}";

這里以JQuery異步獲取的數(shù)據(jù)類(lèi)型——json對(duì)象和字符串為依據(jù)，分別介紹兩種方式獲取到的結(jié)果處理方式。

eval()
對(duì)于服務(wù)器返回的JSON字符串，如果jquery異步請(qǐng)求沒(méi)做類(lèi)型說(shuō)明，或者以字符串方式接受，那么需要做一次對(duì)象化處理，方式不是太麻煩，就是將該字符串放于eval()中執(zhí)行一次。這種方式也適合以普通javascipt方式獲取json對(duì)象，以下舉例說(shuō)明：

// 轉(zhuǎn)換為json對(duì)象

var dataObj=eval("("+data+")");
為什么要 eval這里要添加 ("("+data+")"); 呢？
原因在于：eval本身的問(wèn)題。 由于json是以”{}”的方式來(lái)開(kāi)始以及結(jié)束的，在JS中，它會(huì)被當(dāng)成一個(gè)語(yǔ)句塊來(lái)處理，所以必須強(qiáng)制性的將它轉(zhuǎn)換成一種表達(dá)式。
加上圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式（expression）轉(zhuǎn)化為對(duì)象，而不是作為語(yǔ)句（statement）來(lái)執(zhí)行。舉一個(gè)例子，例如對(duì)象字面量{}，如若不加外層的括號(hào)，那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開(kāi)始和結(jié)束標(biāo)記，那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語(yǔ)句。所以下面兩個(gè)執(zhí)行結(jié)果是不同的：

// return undefined
alert(eval("{}");

// return object[Object]
alert(eval("({})");
對(duì)于這種寫(xiě)法，在JS中，可以到處看到。如: (function()) {}(); 做閉包操作時(shí)等。

//輸出root的子對(duì)象數(shù)量
alert(dataObj.root.length);
$.each(dataObj.root,fucntion(idx,item){
    if(idx==0){
        return true;
    }
    //輸出每個(gè)root子對(duì)象的名稱(chēng)和值
    alert("name:"+item.name+",value:"+item.value);
});

對(duì)于一般的js生成json對(duì)象，只需要將$.each()方法替換為for語(yǔ)句即可，其他不變。

服務(wù)器返回的JSON字符串
對(duì)于服務(wù)器返回的JSON字符串，如果jquery異步請(qǐng)求將type（一般為這個(gè)配置屬性）設(shè)為“json”，或者利 用$.getJSON()方法獲得服務(wù)器返回，那么就不需要eval（）方法了，因?yàn)檫@時(shí)候得到的結(jié)果已經(jīng)是json對(duì)象了，只需直接調(diào)用該對(duì)象即可，這里以$.getJSON方法為例說(shuō)明數(shù)據(jù)處理方法：

$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
    //此處返回的data已經(jīng)是json對(duì)象
    //以下其他操作同第一種情況
    $.each(data.root,function(idx,item){
        if(idx==0){
            //同countinue，返回false同break
            return true;
        }
        alert("name:"+item.name+",value:"+item.value);
    });
});

這里特別需要注意的是方式1中的eval()方法是動(dòng)態(tài)執(zhí)行其中字符串（可能是js腳本）的，這樣很容易會(huì)造成系統(tǒng)的安全問(wèn)題。所以可以采用一些規(guī)避了eval()的第三方客戶端腳本庫(kù)，比如JSON in JavaScript就提供了一個(gè)不超過(guò)3k的腳本庫(kù)。

第二種解析方式就是使用Function對(duì)象來(lái)完成，它的典型應(yīng)用就是在JQuery中的AJAX方法下的success等對(duì)于返回?cái)?shù)據(jù)data的解析。

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

此時(shí)的data就是一個(gè)會(huì)解析成一個(gè)json對(duì)象了。

使用JSON

JSON也就是JavaScript Object Notation，是一個(gè)描述數(shù)據(jù)的輕量級(jí)語(yǔ)法。JSON的優(yōu)雅是因?yàn)樗荍avaScript語(yǔ)言的一個(gè)子集。接下來(lái)你將看到它為什么如此重要。首先，來(lái)比較一下JSON和XML語(yǔ)法。

JSON和XML都使用結(jié)構(gòu)化方法描述數(shù)據(jù)。例如一個(gè)地址簿應(yīng)用程序可以提供用來(lái)產(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語(yǔ)法，目前就是這樣的。它確實(shí)是一個(gè)簡(jiǎn)單的小語(yǔ)言！ XML確實(shí)適合標(biāo)記文檔，但是JSON是數(shù)據(jù)交互的理想格式。每個(gè)JSON文檔描述了一個(gè)這樣一個(gè)對(duì)象，該對(duì)象包含有：嵌套對(duì)象、數(shù)組、字符串、數(shù)字、布 爾值或空值。

在這些地址卡例子代碼中，JSON版本是更輕量級(jí)的，只占用了682字節(jié)的空間，而XML版本需要744字節(jié)空間。盡管這不是一個(gè)可觀的節(jié)省。而實(shí)際的好處則來(lái)自解析過(guò)程。

XML對(duì)比JSON：地位喪失
通過(guò)使用XMLHttpRequest對(duì)象，可以從你的基于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請(qǐng)求完成以后才起作用：那時(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對(duì)象自動(dòng)地解析了，并使responseXML中的DOM樹(shù)可用。通過(guò)使用 responseXML屬性，可以調(diào)用getElementsByTagName方法查找文檔的地址部分，你還可以使用第一個(gè)去找到它。然后，可以再次調(diào) 用getElementsByTagName在地址部分查找第一個(gè)地址元素。這就取得了文檔的第一個(gè)DOM子節(jié)點(diǎn)，就是一個(gè)文本節(jié)點(diǎn)，并取得節(jié)點(diǎn)的值，這 就是你想要的街道地址。最后，可以在表單域中顯示結(jié)果。

確實(shí)不是一個(gè)簡(jiǎn)單的工作，現(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自己的編譯器來(lái)解析它， 通過(guò)調(diào)用eval函數(shù)。解析JSON僅需要一行！此外，操縱JSON中的對(duì)象就像操縱其他JavaScript對(duì)象一樣。這顯然要比通過(guò)DOM樹(shù)來(lái)操縱簡(jiǎn) 單，例如： 

card.addresses[0].value 是第一個(gè)街道地址, "1234 Main Stb &" 

card.addresses[0].type 是地址類(lèi)型, "work" 

card.addresses[1] 是家庭地址對(duì)象 

card.fullname 是card的名稱(chēng), "Sean Kelly" 

如果更仔細(xì)觀察，你可能會(huì)發(fā)現(xiàn)XML格式中文檔至少有一個(gè)跟元素，card。這在JSON里是不存在的，為什么？ 大概就是，如果你正在開(kāi)發(fā)JavaScript來(lái)訪問(wèn)Web服務(wù)，你已經(jīng)知道你想要得到的。然而，你可以在JSON中這么使用：

{"card": {"fullname": ...}}

使用這個(gè)技術(shù)，你的JSON文件總是以一個(gè)帶有單一命名屬性的對(duì)象開(kāi)始，該屬性標(biāo)識(shí)了對(duì)象的種類(lèi)。

JSON是快速可靠的嗎？ 
JSON提供輕量的小文檔，并且JSON在JavaScript更容易使用。XMLHttpRequest自動(dòng)為你解析了XML文檔，而你還要手工解析 JSON文件，但是解析JSON比解析XML更慢么？作者通過(guò)幾千次的反復(fù)測(cè)試，使用XMLHttpRequest解析XML和解析JSON，結(jié)果是解析 JSON比XML要快10倍！當(dāng)把AJAX當(dāng)作桌面應(yīng)用看待時(shí)，速度是最重要的因素，很明顯，JSON更優(yōu)秀。

當(dāng)然，你不能總是控制服務(wù)器端來(lái)為AJAX程序產(chǎn)生數(shù)據(jù)。你還可以使用第三方服務(wù)器代替服務(wù)器提供XML格式的輸出。并且，如果服務(wù)器恰好提供JSON，你可以確定你真的想使用它嗎?

代碼中值得注意的是，你將響應(yīng)文本直接傳入到eval中。如果你控制著服務(wù)器，就可以這么做。如果不是，一個(gè)惡意服務(wù)器可以使你的瀏覽器執(zhí)行危險(xiǎn)操作。在這樣的情況下，你最好使用寫(xiě)在JavaScript中的代碼來(lái)解析JSON。幸運(yùn)地，這已經(jīng)有了。

說(shuō)到解析，Python愛(ài)好者可能注意到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)簡(jiǎn)單的。一些WEB應(yīng)用程序框架，例如TurboGears，自動(dòng)包括對(duì)JSON輸出的支 持。

此外商業(yè)WEB服務(wù)提供商也注意到了JSON。Yahoo最近創(chuàng)建了許多基于JSON的web服務(wù)。Yahoo的多種搜索服務(wù)，履行計(jì) 劃，del.icio.us，還有高速公路交通服務(wù)也都支持JSON輸出。毫無(wú)疑問(wèn)，其他主要WEB服務(wù)提供商也將加入到對(duì)JSON的支持中。