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

{ "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也提供了一種具有嵌套數據元素的結構，就象XML一樣。與XML一樣，JSON也是基于文本的，且它們都使用Unicode編碼，且其與XML一樣具有可讀性。主觀上來看，JSON更為清晰且冗余更少些。JSON網站提供了對JSON語法的嚴格描述，只是描述較簡短。從總體來看，XML比較適合于標記文檔，而JSON卻更適于進行數據交換處理。一個JSON文檔的每一個實例都負責描述一個對象—具體的描述是通過使用嵌套的對象，數組，字符串，數字，布爾值或null值來實現的。 上面地址卡例子的JSON版本更為小些，僅占用大約682字節的空間，而XML版本需要744字節空間。當然，這不是什么驚人的節省。其實，JSON的真正優點在于數據分析方面。 三、JSON與XML數據分析對比 借助于XMLHttpRequest對象，你可以從自己的基于AJAX的應用程序內部檢索XML和JSON文件。典型情況下，你可以使用類似如下的交互：

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

隨著對Web服務器的不斷響應，被你傳遞的處理器函數（在本例中是myHandler）被反復調用，這種特征提供給你一種時機—及早地取消事務，更新一個進度條，等等。通常，你只是在Web請求完成時才采取行動（應用返回的數據）。 為了處理上面地址卡程序的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文檔，分析任務可以由XMLHttpRequest對象為你自動完成。之后，這個XMLHttpRequest對象使得由分析生成的DOM樹可應用于responseXML屬性中。然后，你可以借助這個responseXML屬性并調用getElementsByTagName方法來查找文檔中的addresses部分，但僅能使用找到的第一個（其實只有一個）。然后，你再次在找到的address上調用getElementsByTagName方法來查找下一層中的第一個address元素，然后再次使用找到的第一個address……然后，你得到該元素的第一個DOM子結點（它是一個文本結點）并得到該結點的值（它正是你想找的街道地址）。最后，你就可以在表單域中顯示它。 顯然，這是一項工作量很大的工作！現在，讓我們試用一下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響應。然而，因為JSON是JavaScript的一個子集，所以你可以通過調用eval方法使用JavaScript自己的編譯器來完成這些。分析JSON是非常簡單的！而且，在產生于JSON中的一個對象中導航與在任何JavaScript對象中導航完全一樣。這比在DOM樹中導航要容易得多。例如： ?card.addresses[0].value對應第一條街道地址：“1234 Main Stb &”；
?card.addresses[0].type對應地址的類型：“work”；
?card.addresses[1]對應一個家庭地址對象；
?card.fullname對應卡片名：“Sean Kelly”。 如果仔細觀察，那么你可能注意到，示例程序的XML版本至少要處理包含在文檔中的一個對象—根文檔元素card。這在JSON版本中是不存在的。為什么？如果你曾開發過存取一個Web服務的JavaScript，那么你就會知道你要從Web服務中取回什么。然而，你可以在JSON中包括下面一種更為簡練的形式：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。