詳談基于JSON的高級AJAX開發(fā)技術(shù)
一、 引言
毫無疑問，AJAX已經(jīng)成為當(dāng)今Web開發(fā)中一種強(qiáng)有力的用戶交互技術(shù)，但是它的許多可能性應(yīng)用仍然鮮為人知。在本文中，我們將來共同探討如何使用JavaScript對象標(biāo)志(JSON)和JSON分析器在服務(wù)器和客戶端AJAX引擎之間創(chuàng)建復(fù)雜而強(qiáng)有力的JSON數(shù)據(jù)傳輸層。我們將詳細(xì)討論如何創(chuàng)建一組對象(在其它語言中經(jīng)常被當(dāng)作一個包)，如何把這些對象串行化為JSON以發(fā)送到服務(wù)器端，以及如何把服務(wù)器端JSON反串行化為客戶端JavaScript對象。
提示：你可以在Douglas Crockford的網(wǎng)站上找到本文中使用的JSON分析器。
在繼續(xù)閱讀前，本文假定你已經(jīng)掌握了JavaScript技術(shù)并且了解如何創(chuàng)建一個基本的AJAX引擎，并經(jīng)由AJAX技術(shù)向服務(wù)器端發(fā)出請求和從服務(wù)器端接收響應(yīng)。為了更好地理解本文中示例，你需要下載本文相應(yīng)的源碼文件。
二、 開始
為了進(jìn)一步抽象我們的AJAX請求并有助于我們以后在不同的應(yīng)用程序間共享AJAX引擎代碼，本文使用了一個我自己創(chuàng)建的AJAX引擎。為了使用這個引擎，我們簡單地導(dǎo)入三個JavaScript文件并且向一個名為AjaxUpdater的對象發(fā)出請求。然后，由該引擎來負(fù)責(zé)處理其它任務(wù)，包括把響應(yīng)代理到在該請求中指定的回調(diào)方法中。下面的示例展示了我們?nèi)绾问褂眠@個引擎發(fā)出請求以及導(dǎo)入相關(guān)的文件：
以下是引用片段：
＜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以前經(jīng)常被誤解，似乎它主要用于實(shí)現(xiàn)客戶瀏覽器端圖形效果。其實(shí)，JavaScript是一種強(qiáng)有力的語言，特別當(dāng)它與AJAX以及一個應(yīng)用程序的服務(wù)器端相結(jié)合時;但是，即使在客戶端，JavaScript也能夠?qū)崿F(xiàn)遠(yuǎn)比你預(yù)料得多的多的功能。面向?qū)ο蟮腏avaScript就是一個示例，它能夠使我們創(chuàng)建對象，擴(kuò)展內(nèi)在對象，甚至能夠把我們的對象創(chuàng)建成包以達(dá)到更容易的管理之目的。
在本文示例中，我們將創(chuàng)建三個對象：Auto，Car和Wheel。其中，每一個都是簡單的對象;在此，我們僅使用它們來展示如何創(chuàng)建一個基本包。
首先，Auto對象被聲明為一個新的對象：
以下是引用片段：
var Auto = new Object();
注意，這個Auto對象將用作Car對象的父類。因此，Car對象將成為Auto對象的一個屬性，只不過它被分離到另一個文件中以更易于管理(這個概念經(jīng)常被用于其它面向?qū)ο蟮恼Z言中，但是在JavaScript中卻并不經(jīng)常提起它)。下面是這個Car對象相應(yīng)的代碼：
以下是引用片段：
Auto.Car = new Object();
Auto.Car.color = "#fff";
Auto.Car.setColor = function(_color)
{
Auto.Car.color = _color;
}
Auto.Car.setColor("#333");
如你所見，該Car對象是Auto對象的一個子對象—這分明是一種類對象層次結(jié)構(gòu)。這個對象有一個名為color的屬性和一個用于設(shè)置它的方法。在此，我們把color屬性設(shè)置為灰色以覆蓋掉缺省的白色。當(dāng)在后面我們串行化該對象時請牢記住這個事實(shí)。
下一個對象，Wheel，是Car的一個子對象：
以下是引用片段：
Auto.Car.Wheel = new Object(); Auto.Car.Wheel.color = "#000";
在此，Wheel是一個基本對象，但是它展示了對象層次中的又一個層。這個對象有一個稱為color的缺省值為黑色(“#000”)的屬性。
下面，讓我們來分析一下為什么這些對象如此重要以及我們是如何使用它們提供的簡單的屬性的。
四、 把JavaScript對象串行化為JSON
借助于JSON分析器，我們可以很容易地把剛才創(chuàng)建的JavaScript對象串行化為JSON。首先，我們需要下載該分析器的一個副本，并且要把它添加到文檔中。下面是我在本文示例中用于導(dǎo)入該腳本的相應(yīng)的代碼：
以下是引用片段：
＜script type="text/javascript" src="javascript/utils/jsonparser.js"＞＜/script＞
我已經(jīng)把該分析器添加到我的javascript目錄，即一個稱為utils的子目錄下。
下面是最終的包括到其中用于導(dǎo)入適當(dāng)?shù)腏avaScript文件的代碼片斷：
以下是引用片段：
＜script type="text/javascript" src="javascript/Auto.js"＞＜/script＞
＜script type="text/javascript" src="javascript/Car.js"＞＜/script＞
＜script type="text/javascript" src="javascript/Wheel.js"＞＜/script＞
＜script type="text/javascript" src="javascript/utils/jsonparser.js"＞＜/script＞
＜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＞
在導(dǎo)入適當(dāng)?shù)奈募螅覀兛梢酝ㄟ^把兩個div元素和一個onload事件簡單地添加到HTML文檔中開始串行化。這兩個div元素將分別擁有ID：body和loading。其中，這個loading標(biāo)簽將由AJAX引擎使用來指示進(jìn)度情況，而body標(biāo)簽將用于顯示消息。
以下是引用片段：
＜div id="loading"＞＜/div＞
＜div id="body"＞＜/div＞
onload事件相應(yīng)于body元素并且設(shè)置它的innerHTML屬性為JavaScript對象(作為一個串行化的JSON字符串)。為了實(shí)現(xiàn)這一目的，我在Auto對象上使用了jsonparser.js文件內(nèi)的toJSONString方法：
以下是引用片段：
＜body onload="document.getElementById(’body’).innerHTML = ’＜b＞Local objects serialized as JSON＜/b＞Auto Object: ’+ Auto.toJSONString();"＞
這段代碼使用了Auto對象及其所有的子對象，并且使用JSON分析器的toJSONString方法把它們串行化為一個JSON字符串。然后，該數(shù)據(jù)可以被用作服務(wù)器端的一種數(shù)據(jù)交換格式。
你可能還記得，在前面我們曾調(diào)用了一個稱為setColor的方法來改變Car對象的顏色。當(dāng)時，我使用它是因?yàn)槲蚁胂蚰阏故敬谢軌蛟谶\(yùn)行時刻的任何點(diǎn)上實(shí)現(xiàn)，而且還為了反映出對象中***的數(shù)據(jù)。
如果你仔細(xì)分析一下onload事件，你會注意到，Car和Wheel對象都包裝在方括號內(nèi)，這些方括號代表了父對象(即Auto)。這意味著，該串行化的JavaScript對象能夠在運(yùn)行時刻被發(fā)送到服務(wù)器端以存儲***的數(shù)據(jù)，并且也可以在應(yīng)用程序啟動時從服務(wù)器端進(jìn)行接收以便從數(shù)據(jù)庫中檢索多數(shù)的當(dāng)前數(shù)據(jù)。最精彩的部分在于，為了創(chuàng)建一種“無縫”的過程，所有與服務(wù)器之間實(shí)現(xiàn)的數(shù)據(jù)交換都可以使用JSON技術(shù)來實(shí)現(xiàn)。
下面，讓我們來看一下相同的數(shù)據(jù)是如何從服務(wù)器端接收的，以及它們是如何被使用***的數(shù)據(jù)(典型地，來源于一個數(shù)據(jù)庫)串行化為客戶端JavaScript對象的。
五、 把JSON反串行化為客戶端JavaScript對象
在本文中，我簡單地把一個靜態(tài)文件創(chuàng)建為JSON響應(yīng)，但是在實(shí)際開發(fā)中，你可以把這些數(shù)據(jù)存儲在一個數(shù)據(jù)庫中并且使用一種服務(wù)器端語言返回它。基于這一能力，我們就可以輕松地創(chuàng)建一種強(qiáng)有力的數(shù)據(jù)交換過程!在前面，我們已經(jīng)分析了這一串行化過程。憑基本的AJAX體驗(yàn)，你應(yīng)該能夠理解數(shù)據(jù)是如何被寄送到服務(wù)器端的?，F(xiàn)在，讓我們著手討論反串行化的問題。首先來看一個針對本文示例提供的靜態(tài)JSON文件。這個文件其實(shí)是我們在上一節(jié)中串行化的數(shù)據(jù)：
以下是引用片段：
{"Car":{"color":"#333"，"Wheel":{"color":"#000"}}}
作為一個請求JSON文件的示例，當(dāng)我們點(diǎn)擊下列鏈接時將請求這個串行化的Auto對象：
以下是引用片段：
＜a href="javascript:AjaxUpdater.Update(’GET’， ’json/data.js’， displayResponse);"＞Get remote JSON＜/a＞
一旦接收到響應(yīng)消息，我們的稱為displayResponse回調(diào)方法就會被激活，然后，我們就能夠反串行化并開始使用這些對象：
以下是引用片段：
＜script type="text/javascript"＞
function displayResponse()
{
if(Ajax.checkReadyState(’loading’) == "OK")
{
var Auto = Ajax.request.responseText.parseJSON();
document.getElementById("body").innerHTML += " ＜b＞Remote JSON unserialized＜/b＞";
document.getElementById("body").innerHTML += " Car color: "+Auto.Car.color;
document.getElementById("body").innerHTML += " Wheel color: "+Auto.Car.Wheel.color;
}
}
＜/script＞
這是相當(dāng)激動人心的一部分!一旦我們擁有了該responseText，我們就能夠簡單地使用JSON分析器中的parseJSON方法來從串行化的數(shù)據(jù)中重建我們的Auto對象。借助于這個新的Auto對象，我們就可以調(diào)用相應(yīng)的子對象。這個特征允許我們在服務(wù)器和客戶端來回發(fā)送對象—而不必進(jìn)行大量的分析工作，然而在以前標(biāo)準(zhǔn)的XML響應(yīng)情況下我們將卻必須這樣做。這樣以來，我們就可以創(chuàng)建出能夠基于AJAX技術(shù)來保留自身狀態(tài)的客戶端JavaScript對象。
【編輯推薦】
