[转]基于JSON的高级AJAX开发技术

wapysun

浏览: 21631126 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

基于JSON的高级AJAX开发技术

作者：朱先忠
来源：http://tech.51cto.com/art/200611/34100.htm

一、引言

毫无疑问，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";

下面，让我们来分析一下为什么这些对象如此重要以及我们是如何使用它们提供的简单的属性的。

四、把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＞

＜br/＞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 += "＜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＞

这是相当激动人心的一部分！一旦我们拥有了该responseText，我们就能够简单地使用JSON分析器中的parseJSON方法来从串行化的数据中重建我们的Auto对象。借助于这个新的Auto对象，我们就可以调用相应的子对象。这个特征允许我们在服务器和客户端来回发送对象—而不必进行大量的分析工作，然而在以前标准的XML响应情况下我们将却必须这样做。这样以来，我们就可以创建出能够基于AJAX技术来保留自身状态的客户端JavaScript对象。

分享到：