基于JSON的高級AJAX開發技術是怎樣的

這期內容當中小編將會給大家帶來有關基于JSON的高級AJAX開發技術是怎樣的，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

 一、 引言

毫無疑問，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”)的屬性。

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

四、 把JavaScript對象串行化為JSON

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

以下是引用片段：

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

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

下面是最終的包括到其中用于導入適當的JavaScript文件的代碼片斷：

以下是引用片段：

＜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＞ 

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

以下是引用片段：

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

onload事件相應于body元素并且設置它的innerHTML屬性為JavaScript對象(作為一個串行化的JSON字符串)。為了實現這一目的，我在Auto對象上使用了jsonparser.js文件內的toJSONString方法：

以下是引用片段：

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

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

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

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

下面，讓我們來看一下相同的數據是如何從服務器端接收的，以及它們是如何被使用***的數據(典型地，來源于一個數據庫)串行化為客戶端JavaScript對象的。

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

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

以下是引用片段：

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

作為一個請求JSON文件的示例，當我們點擊下列鏈接時將請求這個串行化的Auto對象：

以下是引用片段：

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

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

以下是引用片段：

＜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＞ 

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

上述就是小編為大家分享的基于JSON的高級AJAX開發技術是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。