? 用JSON技術(shù)加快AJAX程序開發(fā) 朱先忠 編譯 一、引言 當(dāng)微軟把ActiveX XMLHTTP對象納入到JavaScript的Internet Explorer實(shí)現(xiàn)中時，它實(shí)際上已經(jīng)為Web應(yīng)用程序的又一次革命（異步JavaScript+XML，簡稱AJAX）埋下了“火種”。今天，Firefox，Safari，Opera及其它瀏覽器都支持XMLHttpRequest對象，正是這些支持最終才導(dǎo)致了諸如colr.org，backpackit.com和maps.google.com等著名網(wǎng)站的產(chǎn)生。盡管這些網(wǎng)站（不止這些）所提供的應(yīng)用程序運(yùn)行于一種瀏覽器中，但是它們在行為和外觀上卻極類似于傳統(tǒng)的桌面應(yīng)用程序。
在AJAX技術(shù)中，在用戶觀看并與頁面交互的同時（這正相應(yīng)于AJAX中的“異步”部分），由頁面中的JavaScript負(fù)責(zé)把數(shù)據(jù)請求發(fā)送到一個Web服務(wù)器。這些請求只是一些普通的HTTP請求，與瀏覽器用于頁面（連同其中的任何圖像，層疊式樣表等內(nèi)容）檢索的HTTP完全相同。同時，XMLHttpRequest對象可以用于檢索任何類型的數(shù)據(jù)，而不僅僅是XML類型。例如，JavaScript可以使用XMLHttpRequest來檢索一個來自于Web服務(wù)器的普通文本文本并且把它的內(nèi)容顯示于一個表單中。 通過查找位于數(shù)據(jù)之前的“content-type”頭部，XMLHttpRequest對象分析從Web服務(wù)器返回的數(shù)據(jù)的MIME類型。例如，如果這些數(shù)據(jù)的MIME類型是“text/plain”，那么你可以通過分析XMLHttpRequest對象的responseText屬性來存取它；然而，如果其MIME類型為“text/xml”，那么XMLHttpRequest對象必須采取額外的措施：它要在返回的文檔對象上運(yùn)行一個XML分析器并在內(nèi)存中構(gòu)建一棵文檔對象模型（DOM）樹來描述該文檔，并且還要使其可用于responseXML屬性。然后，你才可以使用JavaScript的標(biāo)準(zhǔn)DOM方法在樹中導(dǎo)航并檢索元素、屬性及位于該DOM樹中的其它文本。 雖然XML是進(jìn)行數(shù)據(jù)交換的標(biāo)準(zhǔn)方式，但是通常它不是最好的方式。盡管XML可以把結(jié)構(gòu)和元數(shù)據(jù)添加到數(shù)據(jù)上，但是它使用了一種相當(dāng)繁瑣的方式。XML還有一種相對復(fù)雜的語法，因而需要一種分析器對之進(jìn)行專門分析。在JavaScript中，XML必須被分析成一棵以備后用的DOM樹。并且，一旦你構(gòu)建了這棵DOM樹，你還必須在其中導(dǎo)航以便創(chuàng)建相應(yīng)的JavaScript對象或者以其它方式在你的客戶端Web應(yīng)用程序中使用XML數(shù)據(jù)。
幸好，你還有另外更好的可選方案。 二、JSON簡介 javascript object notation JavaScript對象標(biāo)志，簡稱JSON，是一種描述數(shù)據(jù)的輕量級語法。JSON的優(yōu)越性基于這樣的事實(shí)：它本身就是JavaScript語言的一個子集。你會在后面看到這種特征的重要性。首先，讓我們比較一下JSON和XML的原始語法。
XML和JSON都使用結(jié)構(gòu)化方法來標(biāo)記數(shù)據(jù)。例如，一個地址簿應(yīng)用程序可能提供一個Web服務(wù)—它將以XML形式生成如下的地址卡片：

<?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來表達(dá)，上面的形式將變成如下模樣：

{ "fullname": "Sean Kelly"， "org": "SK Consulting"， "emailaddrs": [ {"type": "work"， "value": kelly@seankelly.biz"}， {"type": "home"， "pref": 1， "value": "kelly@seankelly.tv"} ]， "teleph [ {"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也提供了一種具有嵌套數(shù)據(jù)元素的結(jié)構(gòu)，就象XML一樣。與XML一樣，JSON也是基于文本的，且它們都使用Unicode編碼，且其與XML一樣具有可讀性。主觀上來看，JSON更為清晰且冗余更少些。JSON網(wǎng)站提供了對JSON語法的嚴(yán)格描述，只是描述較簡短。從總體來看，XML比較適合于標(biāo)記文檔，而JSON卻更適于進(jìn)行數(shù)據(jù)交換處理。一個JSON文檔的每一個實(shí)例都負(fù)責(zé)描述一個對象—具體的描述是通過使用嵌套的對象，數(shù)組，字符串，數(shù)字，布爾值或null值來實(shí)現(xiàn)的。 上面地址卡例子的JSON版本更為小些，僅占用大約682字節(jié)的空間，而XML版本需要744字節(jié)空間。當(dāng)然，這不是什么驚人的節(jié)省。其實(shí)，JSON的真正優(yōu)點(diǎn)在于數(shù)據(jù)分析方面。 三、JSON與XML數(shù)據(jù)分析對比 借助于XMLHttpRequest對象，你可以從自己的基于AJAX的應(yīng)用程序內(nèi)部檢索XML和JSON文件。典型情況下，你可以使用類似如下的交互：

var req = new XMLHttpRequest(); req.open("GET"，"http://localhost/addr?cardID=32"， /*async*/true); req. = myHandler; req.send(/*no params*/null);

隨著對Web服務(wù)器的不斷響應(yīng)，被你傳遞的處理器函數(shù)（在本例中是myHandler）被反復(fù)調(diào)用，這種特征提供給你一種時機(jī)—及早地取消事務(wù)，更新一個進(jìn)度條，等等。通常，你只是在Web請求完成時才采取行動（應(yīng)用返回的數(shù)據(jù)）。 為了處理上面地址卡程序的XML版本，myHandler的編碼可以類似如下：

function myHandler() { if (req.readyState == 4 /*完成*/) { //用第一個街道地址更新表單中的地址域 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文檔，分析任務(wù)可以由XMLHttpRequest對象為你自動完成。之后，這個XMLHttpRequest對象使得由分析生成的DOM樹可應(yīng)用于responseXML屬性中。然后，你可以借助這個responseXML屬性并調(diào)用getElementsByTagName方法來查找文檔中的addresses部分，但僅能使用找到的第一個（其實(shí)只有一個）。然后，你再次在找到的address上調(diào)用getElementsByTagName方法來查找下一層中的第一個address元素，然后再次使用找到的第一個address……然后，你得到該元素的第一個DOM子結(jié)點(diǎn)（它是一個文本結(jié)點(diǎn)）并得到該結(jié)點(diǎn)的值（它正是你想找的街道地址）。最后，你就可以在表單域中顯示它。 顯然，這是一項(xiàng)工作量很大的工作！現(xiàn)在，讓我們試用一下JSON：

function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr'); var card = eval('(' + req.resp + ')'); addrField.value = card.addresses[0].value; } }

你需要做的第一件事情是手工地分析JSON響應(yīng)。然而，因?yàn)镴SON是JavaScript的一個子集，所以你可以通過調(diào)用eval方法使用JavaScript自己的編譯器來完成這些。分析JSON是非常簡單的！而且，在產(chǎn)生于JSON中的一個對象中導(dǎo)航與在任何JavaScript對象中導(dǎo)航完全一樣。這比在DOM樹中導(dǎo)航要容易得多。例如： ?card.addresses[0].value對應(yīng)第一條街道地址：“1234 Main Stb &”；
?card.addresses[0].type對應(yīng)地址的類型：“work”；
?card.addresses[1]對應(yīng)一個家庭地址對象；
?card.fullname對應(yīng)卡片名：“Sean Kelly”。 如果仔細(xì)觀察，那么你可能注意到，示例程序的XML版本至少要處理包含在文檔中的一個對象—根文檔元素card。這在JSON版本中是不存在的。為什么？如果你曾開發(fā)過存取一個Web服務(wù)的JavaScript，那么你就會知道你要從Web服務(wù)中取回什么。然而，你可以在JSON中包括下面一種更為簡練的形式：

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

通過使用這一技術(shù)，你的JSON文件總是以一個對象開頭并且用單個命名的屬性來標(biāo)記該對象的“類型”。 四、JSON的快速可靠性 JSON能夠生成更小的文檔，且其在JavaScript腳本中更易于使用。XMLHttpRequest能夠?yàn)槟阕詣臃治鯴ML文檔，然而你必須手工分析JSON。這樣以來，你可能質(zhì)疑：分析JSON是否比分析XML更慢？對比JSON，我針對上面的地址卡測試了嵌入到XMLHttpRequest中的XML分析器—通過把這些數(shù)據(jù)置入上千次的循環(huán)中。最終結(jié)果表明，分析JSON比分析XML快大約10倍！如果想實(shí)現(xiàn)AJAX程序的行為類似于桌面應(yīng)用程序，那么速度就是一切。很明顯，JSON是勝者。 當(dāng)然，你不可能一直控制為你的AJAX應(yīng)用程序產(chǎn)生數(shù)據(jù)的服務(wù)器端。你可以使用一種第三方服務(wù)器來處理你的數(shù)據(jù)，而且讓該服務(wù)器僅提供XML輸出。然而，如果該服務(wù)器中恰巧能夠提供JSON支持，那么你能否確定并敢于使用這一支持？ 注意，在上面的示例中，你是直接把響應(yīng)文本傳遞到一個對eval的調(diào)用中。如果你信任并控制了服務(wù)器，這是沒有問題的；然而，另外一些情況下，一個惡意的服務(wù)器有可能給你的瀏覽器執(zhí)行帶來危險操作。為此，你最好使用一個用JavaScript編寫的JSON分析器。幸好，已經(jīng)存在可用的分析器了。 談到分析器，Python迷們可能還沒有注意到，JSON不僅是JavaScript的一個子集，而且它還是Python的一個子集。你可以直接在Python中使用JSON，或利用一種安全的JSON分析器?，F(xiàn)在，針對于JSON的分析器也大量地存在于其它語言中；你可以參考JSON.org網(wǎng)站來選擇使用相應(yīng)的分析器。 五、服務(wù)器端技術(shù)對JSON的支持 到目前為止，我們一直集中于討論如何把JSON應(yīng)用于客戶端瀏覽器上的基于AJAX技術(shù)的Web應(yīng)用程序。當(dāng)然，Web服務(wù)器端必須存在一定的技術(shù)支持才能實(shí)現(xiàn)首先生成JSON，然后由客戶端使用JSON。幸好，基于現(xiàn)有數(shù)據(jù)結(jié)構(gòu)創(chuàng)建JSON是一件相當(dāng)直接的事情。另外，一些Web應(yīng)用程序框架（例如TurboGears）已經(jīng)自動包括支持JSON輸出。 另外，商業(yè)Web服務(wù)供應(yīng)商也都特別關(guān)注JSON。Yahoo最近在其Web服務(wù)中大量地加入對JSON的支持。Yahoo的多種搜索服務(wù)，旅行規(guī)劃者，del.icio.us和高速公路交通服務(wù)都支持JSON輸出。無疑，其它一些主要的Web服務(wù)供應(yīng)商也都會逐漸地提供對JSON的支持。 六、結(jié)論 JSON的基本思想是，把自己實(shí)現(xiàn)為JavaScript（和Pyth 2.0開發(fā)中XML數(shù)據(jù)操作的主要替代者。任何開發(fā)者，無論是開發(fā)標(biāo)準(zhǔn)桌面應(yīng)用程序還是開發(fā)Web應(yīng)用程序，只要使用XML數(shù)據(jù)處理，都會欣賞JSON的簡易特征。最后，我衷心祝愿JSON能加快你的基于AJAX技術(shù)的Web 2.0應(yīng)用程序的開發(fā)。

總結(jié)

以上是生活随笔為你收集整理的用JSON技术加快AJAX程序开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。