详谈基于JSON的高级AJAX开发技术

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

四、 把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对象

上一页  [1] [2] 

【责编:Peng】