快速业务通道

基于JSON的高级AJAX开发技术 - 编程入门网

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-06-25
,Wheel是一个基本对象,但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色(“#000”)的属性。

基于JSON的高级AJAX开发技术(2)

时间:2007-05-30 JSON

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

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

在本文

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号