基于JSON的高级AJAX开发技术

一、引言
毫无疑问，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";

<在此，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 οnlοad="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对象。

基于JSON的高级AJAX开发技术相关推荐

基于c的语言开发,基于CC++等高级编程语言开发电子系统的设计自动化系统.doc
基于CC等高级编程语言开发电子系统的设计自动化系统基于CC++等高级编程语言开发电子系统的设计自动化系统摘要:当前电子系统设计自动化技术已广泛地应用于各个领域,随着科技的发展,对电子系统设计自动 ...
高级JAVA开发技术栈知识点总结
高级JAVA开发技术栈知识点总结写在前面 MQ Redis Dubbo 分布式系统 JVM Java基础写在前面 "金三银四"对于今年(2019)的互联网行业行情并不适用,面 ...
TCPIP技术实验大作业：基于TCP/IP的程序开发技术综述及应用实践
一.基于TCP/IP的程序开发技术综述 1.1TCP/IP协议族简介 TCP/IP也被称作传输控制协议/网际协议,作为网络互连的核心协议,受到广泛的应用.该协议类型作为开放性的标准应用在各种计算机中, ...
Java毕业设计_基于SSH的Java EE开发技术课程网站设计
基于SSH的Java EE开发技术课程网站设计基于SSH的Java EE开发技术课程网站设计mysql数据库创建语句基于SSH的Java EE开发技术课程网站设计oracle数据库创建语句基于S ...
Java高级分布式系统开发技术网易云课堂
Java高级分布式系统开发技术网易云课堂授课大纲第一章分布式应用协调 1.1 互联网系统架构演进之路 1.1.1 集中式单体应用 1.1.2 系统拆分RPC阶段 1.1.3 微服务治理阶段 1 ...
Ruby系统中的AJAX开发技术简析
一. Ajax的简短历史在短短几个月内,Ajax从一种十分模糊稀罕的技术一下变成最热门的东西.本文将介绍极其容易使用的Ajax支持-作为Ruby on Rails web应用程序框架的一部分实现. ...
基于python的网站开发-FlaskWeb开发：基于Python的Web应用开发实战 pdf下载
这大概是入门Flask最最经典的教材了.可是我依然看得很吃力,我的自控力啊啊~到哪里去了讲的挺全面挺系统有的地方需要硬肯不过好在指明了方向比较贴近现在流行的开发模式这两天写了一个小博客应用 ...
JAVA基于J2ME的手机游戏开发和实现——贪吃蛇
随着通信技术的发展和手机的普及,手机游戏的开发技术越来越为人们所关注.以J2ME为开发平台,利用Java提供强大工具,不但可以在手机上实现静态HTML技术所无法实现的计算处理.数据存储.与服务器的通信 ...
序：何为高级java开发工程师？
高级开发工程师开发工程师的分级初级java开发 : 中级java开发高级java开发技术业务管理开发工程师的分级在软件开发行业,通常会对工程师做分级,各大厂通常有自己内部的职级划分和评 ...

基于JSON的高级AJAX开发技术

基于JSON的高级AJAX开发技术相关推荐

最新文章

热门文章