基于JSON的進階AJAX開發技術

一、 引言

毫無疑問，AJAX已經成為當今Web開發中一種強有力的使用者互動技術，但是它的許多可能性 應用仍然鮮為人知。在本文中，我們将來共同探讨如何使用JavaScript對象标志(JSON)和JSON分析器在伺服器和用戶端AJAX引擎之間建立 複雜而強有力的JSON資料傳輸層。我們将詳細讨論如何建立一組對象(在其它語言中經常被當作一個包)，如何把這些對象串行化為JSON以發送到伺服器 端，以及如何把伺服器端JSON反串行化為用戶端JavaScript對象。

提示：你可以在Douglas Crockford的網站上找到本文中使用的JSON分析器。

在繼續閱讀前，本文假定你已經掌握了JavaScript技術并且了解如何建立一個基本的AJAX引擎，并經由AJAX技術向伺服器端送出請求和從伺服器端接收響應。為了更好地了解本文中示例，你需要下載下傳本文相應的源碼檔案。

二、 開始

為 了進一步抽象我們的AJAX請求并有助于我們以後在不同的應用程式間共享AJAX引擎代碼，本文使用了一個我自己建立的AJAX引擎。為了使用這個引擎， 我們簡單地導入三個JavaScript檔案并且向一個名為AjaxUpdater的對象送出請求。然後，由該引擎來負責處理其它任務，包括把響應代理到 在該請求中指定的回調方法中。下面的示例展示了我們如何使用這個引擎送出請求以及導入相關的檔案：

首先，讓我們來讨論JavaScript對象。

三、 JavaScript對象

JavaScript 以前經常被誤解，似乎它主要用于實作客戶浏覽器端圖形效果。其實，JavaScript是一種強有力的語言，特别當它與AJAX以及一個應用程式的伺服器 端相結合時；但是，即使在用戶端，JavaScript也能夠實作遠比你預料得多的多的功能。面向對象的JavaScript就是一個示例，它能夠使我們 建立對象，擴充内在對象，甚至能夠把我們的對象建立成包以達到更容易的管理之目的。

在本文示例中，我們将建立三個對象：Auto，Car和Wheel。其中，每一個都是簡單的對象；在此，我們僅使用它們來展示如何建立一個基本包。

首先，Auto對象被聲明為一個新的對象：

注意，這個Auto對象将用作Car對象的父類。是以，Car對象将成為Auto對象的一個屬性，隻不過它被分離到另一個檔案中以更易于管理（這個概念經常被用于其它面向對象的語言中，但是在JavaScript中卻并不經常提起它）。下面是這個Car對象相應的代碼：

如你所見，該Car對象是Auto對象的一個子對象—這分明是一種類對象層次結構。這個對象有一個名為color的屬性和一個用于設定它的方法。在此，我們把color屬性設定為灰色以覆寫掉預設的白色。當在後面我們串行化該對象時請牢記住這個事實。

下一個對象，Wheel，是Car的一個子對象：

<在此，Wheel是一個基本對象，但是它展示了對象層次中的又一個層。這個對象有一個稱為color的預設值為黑色（“#000”）的屬性。

下面，讓我們來分析一下為什麼這些對象如此重要以及我們是如何使用它們提供的簡單的屬性的。

四、 把JavaScript對象串行化為JSON

借助于JSON分析器，我們可以很容易地把剛才建立的JavaScript對象串行化為JSON。首先，我們需要下載下傳該分析器的一個副本，并且要把它添加到文檔中。下面是我在本文示例中用于導入該腳本的相應的代碼：

我已經把該分析器添加到我的javascript目錄，即一個稱為utils的子目錄下。

下面是最終的包括到其中用于導入适當的JavaScript檔案的代碼片斷：

在導入适當的檔案後，我們可以通過把兩個div元素和一個onload事件簡單地添加 到HTML文檔中開始串行化。這兩個div元素将分别擁有ID：body和loading。其中，這個loading标簽将由AJAX引擎使用來訓示進度 情況，而body标簽将用于顯示消息。

onload事件相應于body元素并且設定它的innerHTML屬性為JavaScript對象（作為一個串行化的JSON字元串）。為了實作這一目的，我在Auto對象上使用了jsonparser.js檔案内的toJSONString方法：

這段代碼使用了Auto對象及其所有的子對象，并且使用JSON分析器的toJSONString方法把它們串行化為一個JSON字元串。然後，該資料可以被用作伺服器端的一種資料交換格式。

你可能還記得，在前面我們曾調用了一個稱為setColor的方法來改變Car對象的顔色。當時，我使用它是因為我想向你展示串行化能夠在運作時刻的任何點上實作，而且還為了反映出對象中最新的資料。

如 果你仔細分析一下onload事件，你會注意到，Car和Wheel對象都包裝在方括号内，這些方括号代表了父對象（即Auto）。這意味着，該串行化的 JavaScript對象能夠在運作時刻被發送到伺服器端以存儲最新的資料，并且也可以在應用程式啟動時從伺服器端進行接收以便從資料庫中檢索多數的目前 資料。最精彩的部分在于，為了建立一種“無縫”的過程，所有與伺服器之間實作的資料交換都可以使用JSON技術來實作。

下面，讓我們來看一下相同的資料是如何從伺服器端接收的，以及它們是如何被使用最新的資料（典型地，來源于一個資料庫）串行化為用戶端JavaScript對象的。

五、 把JSON反串行化為用戶端JavaScript對象

在 本文中，我簡單地把一個靜态檔案建立為JSON響應，但是在實際開發中，你可以把這些資料存儲在一個資料庫中并且使用一種伺服器端語言傳回它。基于這一能 力，我們就可以輕松地建立一種強有力的資料交換過程！在前面，我們已經分析了這一串行化過程。憑基本的AJAX體驗，你應該能夠了解資料是如何被寄送到服 務器端的。現在，讓我們着手讨論反串行化的問題。首先來看一個針對本文示例提供的靜态JSON檔案。這個檔案其實是我們在上一節中串行化的資料：

作為一個請求JSON檔案的示例，當我們點選下列連結時将請求這個串行化的Auto對象：

一旦接收到響應消息，我們的稱為displayResponse回調方法就會被激活，然後，我們就能夠反串行化并開始使用這些對象：

這是相當激動人心的一部分！一旦我們擁有了該responseText，我們就能夠簡單地使用JSON分析器中的parseJSON方法來從串行化 的資料中重建我們的Auto對象。借助于這個新的Auto對象，我們就可以調用相應的子對象。這個特征允許我們在伺服器和用戶端來回發送對象—而不必進行 大量的分析工作，然而在以前标準的XML響應情況下我們将卻必須這樣做。這樣以來，我們就可以建立出能夠基于AJAX技術來保留自身狀态的用戶端 JavaScript對象。

本文轉自朱先忠老師51CTO部落格，原文連結：http://blog.51cto.com/zhuxianzhong/60093 ，如需轉載請自行聯系原作者