详谈基于JSON的高级AJAX开发技术
日期：2011-01-09 浏览次数：20435 次
本文将解释如何使用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/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对象被声明为一个新的对象：
注意，这个Auto对象将用作Car对象的父类。因此，Car对象将成为Auto对象的一个属性，只不过它被分离到另一个文件中以更易于管理(这个概念经常被用于其它面向对象的语言中，但是在JavaScript中却并不经常提起它)。下面是这个Car对象相应的代码：
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.color = "#000";
在此，Wheel是一个基本对象，但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色(“#000”)的属性。
下面，让我们来分析一下为什么这些对象如此重要以及我们是如何使用它们提供的简单的属性的。
四、 把JavaScript对象串行化为JSON
借助于JSON分析器，我们可以很容易地把刚才创建的JavaScript对象串行化为JSON。首先，我们需要下载该分析器的一个副本，并且要把它添加到文档中。下面是我在本文示例中用于导入该脚本的相应的代码：
我已经把该分析器添加到我的javascript目录，即一个称为utils的子目录下。
下面是最终的包括到其中用于导入适当的JavaScript文件的代码片断：
＜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="body"＞＜/div＞
onload事件相应于body元素并且设置它的innerHTML属性为JavaScript对象(作为一个串行化的JSON字符串)。为了实现这一目的，我在Auto对象上使用了jsonparser.js文件内的toJSONString方法：
这段代码使用了Auto对象及其所有的子对象，并且使用JSON分析器的toJSONString方法把它们串行化为一个JSON字符串。然后，该数据可以被用作服务器端的一种数据交换格式。
你可能还记得，在前面我们曾调用了一个称为setColor的方法来改变Car对象的颜色。当时，我使用它是因为我想向你展示串行化能够在运行时刻的任何点上实现，而且还为了反映出对象中最新的数据。
如果你仔细分析一下onload事件，你会注意到，C
