基於JSON的進階AJAX開發技術

本文將解釋如何使用AJAX和JSON分析器在用戶端和伺服器之間建立複雜的JSON資料轉送層。

一、 引言

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

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

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

二、 開始

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

以下是引用片段：
＜script type="text/javascript"src="javascript/model/Ajax.js"＞＜/script＞
＜script type="text/javascript" src="javascript/model/HTTP.js"＞＜/script＞
＜script type="text/javascript" src="javascript/model/AjaxUpdater.js"＞＜/script＞
＜script type="text/javascript"＞ document.load = AjaxUpdater.Update(’GET’， URL， callback); ＜/script＞

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

三、 JavaScript對象

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

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

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

以下是引用片段：
　　 var Auto = new Object();

注意，這個Auto對象將用作Car對象的父類。因此，Car對象將成為Auto對象的一個屬性，只不過它被分離到另一個檔案中以更易於管理(這個概念經常被用於其它物件導向的語言中，但是在JavaScript中卻並不經常提起它)。下面是這個Car對象相應的代碼：

以下是引用片段：
　　 Auto.Car = new Object();
　　 Auto.Car.color = "#fff";
　　 Auto.Car.setColor = function(_color)
　　 {
　　 Auto.Car.color = _color;
　　 }
　　 Auto.Car.setColor("#333");

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

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

以下是引用片段：
Auto.Car.Wheel = new Object();
Auto.Car.Wheel.color = "#000";

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