一、 引言
毫無疑問，AJAX已經(jīng)成為當(dāng)今Web開發(fā)中一種強(qiáng)有力的用戶交互技術(shù)，但是它的許多可能性 應(yīng)用仍然鮮為人知。在本文中，我們將來共同探討如何使用JavaScript對(duì)象標(biāo)志(JSON)和JSON分析器在服務(wù)器和客戶端AJAX引擎之間創(chuàng)建 復(fù)雜而強(qiáng)有力的JSON數(shù)據(jù)傳輸層。我們將詳細(xì)討論如何創(chuàng)建一組對(duì)象(在其它語言中經(jīng)常被當(dāng)作一個(gè)包)，如何把這些對(duì)象串行化為JSON以發(fā)送到服務(wù)器 端，以及如何把服務(wù)器端JSON反串行化為客戶端JavaScript對(duì)象。
提示：你可以在Douglas Crockford的網(wǎng)站上找到本文中使用的JSON分析器。
在繼續(xù)閱讀前，本文假定你已經(jīng)掌握了JavaScript技術(shù)并且了解如何創(chuàng)建一個(gè)基本的AJAX引擎，并經(jīng)由AJAX技術(shù)向服務(wù)器端發(fā)出請(qǐng)求和從服務(wù)器端接收響應(yīng)。為了更好地理解本文中示例，你需要下載本文相應(yīng)的源碼文件。
二、 開始
為 了進(jìn)一步抽象我們的AJAX請(qǐng)求并有助于我們以后在不同的應(yīng)用程序間共享AJAX引擎代碼，本文使用了一個(gè)我自己創(chuàng)建的AJAX引擎。為了使用這個(gè)引擎， 我們簡單地導(dǎo)入三個(gè)JavaScript文件并且向一個(gè)名為AjaxUpdater的對(duì)象發(fā)出請(qǐng)求。然后，由該引擎來負(fù)責(zé)處理其它任務(wù)，包括把響應(yīng)代理到 在該請(qǐng)求中指定的回調(diào)方法中。下面的示例展示了我們?nèi)绾问褂眠@個(gè)引擎發(fā)出請(qǐng)求以及導(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對(duì)象。
三、 JavaScript對(duì)象
JavaScript 以前經(jīng)常被誤解，似乎它主要用于實(shí)現(xiàn)客戶瀏覽器端圖形效果。其實(shí)，JavaScript是一種強(qiáng)有力的語言，特別當(dāng)它與AJAX以及一個(gè)應(yīng)用程序的服務(wù)器 端相結(jié)合時(shí)；但是，即使在客戶端，JavaScript也能夠?qū)崿F(xiàn)遠(yuǎn)比你預(yù)料得多的多的功能。面向?qū)ο蟮腏avaScript就是一個(gè)示例，它能夠使我們 創(chuàng)建對(duì)象，擴(kuò)展內(nèi)在對(duì)象，甚至能夠把我們的對(duì)象創(chuàng)建成包以達(dá)到更容易的管理之目的。
在本文示例中，我們將創(chuàng)建三個(gè)對(duì)象：Auto，Car和Wheel。其中，每一個(gè)都是簡單的對(duì)象；在此，我們僅使用它們來展示如何創(chuàng)建一個(gè)基本包。
首先，Auto對(duì)象被聲明為一個(gè)新的對(duì)象：

var Auto = new Object();

注意，這個(gè)Auto對(duì)象將用作Car對(duì)象的父類。因此，Car對(duì)象將成為Auto對(duì)象的一個(gè)屬性，只不過它被分離到另一個(gè)文件中以更易于管理（這個(gè)概念經(jīng)常被用于其它面向?qū)ο蟮恼Z言中，但是在JavaScript中卻并不經(jīng)常提起它）。下面是這個(gè)Car對(duì)象相應(yīng)的代碼：

Auto.Car = new Object(); Auto.Car.color = "#fff"; Auto.Car.setColor = function(_color) { 　Auto.Car.color = _color; } Auto.Car.setColor("#333");

如你所見，該Car對(duì)象是Auto對(duì)象的一個(gè)子對(duì)象—這分明是一種類對(duì)象層次結(jié)構(gòu)。這個(gè)對(duì)象有一個(gè)名為color的屬性和一個(gè)用于設(shè)置它的方法。在此，我們把color屬性設(shè)置為灰色以覆蓋掉缺省的白色。當(dāng)在后面我們串行化該對(duì)象時(shí)請(qǐng)牢記住這個(gè)事實(shí)。
下一個(gè)對(duì)象，Wheel，是Car的一個(gè)子對(duì)象：

Auto.Car.Wheel = new Object(); Auto.Car.Wheel.color = "#000";

<在此，Wheel是一個(gè)基本對(duì)象，但是它展示了對(duì)象層次中的又一個(gè)層。這個(gè)對(duì)象有一個(gè)稱為color的缺省值為黑色（“#000”）的屬性。
下面，讓我們來分析一下為什么這些對(duì)象如此重要以及我們是如何使用它們提供的簡單的屬性的。 四、 把JavaScript對(duì)象串行化為JSON
借助于JSON分析器，我們可以很容易地把剛才創(chuàng)建的JavaScript對(duì)象串行化為JSON。首先，我們需要下載該分析器的一個(gè)副本，并且要把它添加到文檔中。下面是我在本文示例中用于導(dǎo)入該腳本的相應(yīng)的代碼：

＜script type="text/javascript" src="javascript/utils/jsonparser.js"＞＜/script＞

我已經(jīng)把該分析器添加到我的javascript目錄，即一個(gè)稱為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ù)奈募?#xff0c;我們可以通過把兩個(gè)div元素和一個(gè)onload事件簡單地添加 到HTML文檔中開始串行化。這兩個(gè)div元素將分別擁有ID：body和loading。其中，這個(gè)loading標(biāo)簽將由AJAX引擎使用來指示進(jìn)度 情況，而body標(biāo)簽將用于顯示消息。

＜div id="loading"＞＜/div＞ ＜div id="body"＞＜/div＞

onload事件相應(yīng)于body元素并且設(shè)置它的innerHTML屬性為JavaScript對(duì)象（作為一個(gè)串行化的JSON字符串）。為了實(shí)現(xiàn)這一目的，我在Auto對(duì)象上使用了jsonparser.js文件內(nèi)的toJSONString方法：

＜body οnlοad="document.getElementById(’body’).innerHTML = ’＜b＞Local objects serialized as JSON＜/b＞＜br/＞Auto Object: ’+ Auto.toJSONString();"＞

這段代碼使用了Auto對(duì)象及其所有的子對(duì)象，并且使用JSON分析器的toJSONString方法把它們串行化為一個(gè)JSON字符串。然后，該數(shù)據(jù)可以被用作服務(wù)器端的一種數(shù)據(jù)交換格式。
你可能還記得，在前面我們?cè){(diào)用了一個(gè)稱為setColor的方法來改變Car對(duì)象的顏色。當(dāng)時(shí)，我使用它是因?yàn)槲蚁胂蚰阏故敬谢軌蛟谶\(yùn)行時(shí)刻的任何點(diǎn)上實(shí)現(xiàn)，而且還為了反映出對(duì)象中最新的數(shù)據(jù)。
如 果你仔細(xì)分析一下onload事件，你會(huì)注意到，Car和Wheel對(duì)象都包裝在方括號(hào)內(nèi)，這些方括號(hào)代表了父對(duì)象（即Auto）。這意味著，該串行化的 JavaScript對(duì)象能夠在運(yùn)行時(shí)刻被發(fā)送到服務(wù)器端以存儲(chǔ)最新的數(shù)據(jù)，并且也可以在應(yīng)用程序啟動(dòng)時(shí)從服務(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ù)（典型地，來源于一個(gè)數(shù)據(jù)庫）串行化為客戶端JavaScript對(duì)象的。
五、 把JSON反串行化為客戶端JavaScript對(duì)象
在 本文中，我簡單地把一個(gè)靜態(tài)文件創(chuàng)建為JSON響應(yīng)，但是在實(shí)際開發(fā)中，你可以把這些數(shù)據(jù)存儲(chǔ)在一個(gè)數(shù)據(jù)庫中并且使用一種服務(wù)器端語言返回它。基于這一能 力，我們就可以輕松地創(chuàng)建一種強(qiáng)有力的數(shù)據(jù)交換過程！在前面，我們已經(jīng)分析了這一串行化過程。憑基本的AJAX體驗(yàn)，你應(yīng)該能夠理解數(shù)據(jù)是如何被寄送到服 務(wù)器端的。現(xiàn)在，讓我們著手討論反串行化的問題。首先來看一個(gè)針對(duì)本文示例提供的靜態(tài)JSON文件。這個(gè)文件其實(shí)是我們?cè)谏弦还?jié)中串行化的數(shù)據(jù)：

{"Car":{"color":"#333"，"Wheel":{"color":"#000"}}}

作為一個(gè)請(qǐng)求JSON文件的示例，當(dāng)我們點(diǎn)擊下列鏈接時(shí)將請(qǐng)求這個(gè)串行化的Auto對(duì)象：

＜a href="javascript:AjaxUpdater.Update(’GET’， ’json/data.js’， displayResponse);"＞Get remote JSON＜/a＞

一旦接收到響應(yīng)消息，我們的稱為displayResponse回調(diào)方法就會(huì)被激活，然后，我們就能夠反串行化并開始使用這些對(duì)象：

＜script type="text/javascript"＞ function displayResponse() { 　if(Ajax.checkReadyState(’loading’) == "OK") 　{ var Auto = Ajax.request.responseText.parseJSON(); document.getElementById("body").innerHTML += "＜br/＞＜b＞Remote JSON unserialized＜/b＞"; document.getElementById("body").innerHTML += "＜br/＞Car color: "+Auto.Car.color; document.getElementById("body").innerHTML += "＜br/＞Wheel color: "+Auto.Car.Wheel.color; 　} } ＜/script＞

這是相當(dāng)激動(dòng)人心的一部分！一旦我們擁有了該responseText，我們就能夠簡單地使用JSON分析器中的parseJSON方法來從串行化 的數(shù)據(jù)中重建我們的Auto對(duì)象。借助于這個(gè)新的Auto對(duì)象，我們就可以調(diào)用相應(yīng)的子對(duì)象。這個(gè)特征允許我們?cè)诜?wù)器和客戶端來回發(fā)送對(duì)象—而不必進(jìn)行 大量的分析工作，然而在以前標(biāo)準(zhǔn)的XML響應(yīng)情況下我們將卻必須這樣做。這樣以來，我們就可以創(chuàng)建出能夠基于AJAX技術(shù)來保留自身狀態(tài)的客戶端 JavaScript對(duì)象。

總結(jié)

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

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