基于JSON的高级AJAX开发技术

　　　　　
　　　编辑推荐：AJAX专区

　　提要 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。

　　一、 引言

　　毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包)，如何把这些对象串行化为JSON以发送到服务器端，以及如何把服务器端JSON反串行化为客户端JavaScript对象。

　　提示】你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

　　在继续阅读前，本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎，并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例，你需要下载本文相应的源码文件。

　　二、 开始

　　为了进一步抽象我们的AJAX请求并有助于我们以后在不同的应用程序间共享AJAX引擎代码，本文使用了一个我自己创建的AJAX引擎。为了使用这个引擎，我们简单地导入三个JavaScript文件并且向一个名为AjaxUpdater的对象发出请求。然后，由该引擎来负责处理其它任务，包括把响应代理到在该请求中指定的回调方法中。下面的示例展示了我们如何使用这个引擎发出请求以及导入相关的文件：

<table borderColor=#cccccc width="90%" align=center bgColor=#e6e6e3 border=1> <tr> <td>＜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＞ </td></tr></table>
　　首先，让我们来讨论JavaScript对象。

　　三、 JavaScript对象

　　JavaScript以前经常被误解，似乎它主要用于实现客户浏览器端图形效果。其实，JavaScript是一种强有力的语言，特别当它与AJAX以及一个应用程序的服务器端相结合时；但是，即使在客户端，JavaScript也能够实现远比你预料得多的多的功能。面向对象的JavaScript就是一个示例，它能够使我们创建对象，扩展内在对象，甚至能够把我们的对象创建成包以达到更容易的管理之目的。

　　在本文示例中，我们将创建三个对象：Auto，Car和Wheel。其中，每一个都是简单的对象；在此，我们仅使用它们来展示如何创建一个基本包。

　　首先，Auto对象被声明为一个新的对象：

<table borderColor=#cccccc width="90%" align=center bgColor=#e6e6e3 border=1> <tr> <td>var Auto = new Object();</td></tr></table>
　　注意，这个Auto对象将用作Car对象的父类。因此，Car对象将成为Auto对象的一个属性，只不过它被分离到另一个文件中以更易于管理（这个概念经常被用于其它面向对象的语言中，但是在JavaScript中却并不经常提起它）。下面是这个Car对象相应的代码：

<table borderColor=#cccccc width="90%" align=center bgColor=#e6e6e3 border=1> <tr> <td>Auto.Car = new Object();
Auto.Car.color = "#fff";
Auto.Car.setColor = function(_color)
{
　Auto.Car.color = _color;
}
Auto.Car.setColor("#333");</td></tr></table>
　　如你所见，该Car对象是Auto对象的一个子对象—这分明是一种类对象层次结构。这个对象有一个名为color的属性和一个用于设置它的方法。在此，我们把color属性设置为灰色以覆盖掉缺省的白色。当在后面我们串行化该对象时请牢记住这个事实。

　　下一个对象，Wheel，是Car的一个子对象：

<table borderColor=#cccccc width="90%" align=center bgColor=#e6e6e3 border=1> <tr> <td>Auto.Car.Wheel = new Object();
Auto.Car.Wheel.color = "#000";</td></tr></table>
　　在此，Wheel是一个基本对象，但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色（“#000”）的属性。

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