通行证： 密码： 保存密码
收藏 帮助
正文

用JSON技术加快AJAX程序开发

标签: json，ajax
一、引言

当微软把ActiveX XMLHTTP对象纳入到javascript的Internet Explorer实现中时，它实际上已经为Web应用程序的又一次革命（异步javascript+XML，简称AJAX）埋下了“火种”。今天， Firefox，Safari，Opera及其它浏览器都支持XMLHttpRequest对象，正是这些支持最终才导致了诸如colr.org， backpackit.com和maps.google.com等著名网站的产生。尽管这些网站（不止这些）所提供的应用程序运行于一种浏览器中，但是它 们在行为和外观上却极类似于传统的桌面应用程序。

在AJAX技术中，在用户观看并与页面交互的同时（这正相应于AJAX中的“异步”部分），由页面中的javascript负责把数据请求发送到一 个Web服务器。这些请求只是一些普通的HTTP请求，与浏览器用于页面（连同其中的任何图像，层叠式样表等内容）检索的HTTP完全相同。同时， XMLHttpRequest对象可以用于检索任何类型的数据，而不仅仅是XML类型。例如，javascript可以使用XMLHttpRequest 来检索一个来自于Web服务器的普通文本文本并且把它的内容显示于一个表单中。

通过查找位于数据之前的“content-type”头部，XMLHttpRequest对象分析从Web服务器返回的数据的MIME类型。例如， 如果这些数据的MIME类型是“text/plain”，那么你可以通过分析XMLHttpRequest对象的responseText属性来存取它； 然而，如果其MIME类型为“text/xml”，那么XMLHttpRequest对象必须采取额外的措施：它要在返回的文档对象上运行一个XML分析 器并在内存中构建一棵文档对象模型（DOM）树来描述该文档，并且还要使其可用于responseXML属性。然后，你才可以使用javascript的 标准DOM方法在树中导航并检索元素、属性及位于该DOM树中的其它文本。

虽然XML是进行数据交换的标准方式，但是通常它不是最好的方式。尽管XML可以把结构和元数据添加到数据上，但是它使用了一种相当繁琐的方式。 XML还有一种相对复杂的语法，因而需要一种分析器对之进行专门分析。在javascript中，XML必须被分析成一棵以备后用的DOM树。并且，一旦 你构建了这棵DOM树，你还必须在其中导航以便创建相应的javascript对象或者以其它方式在你的客户端Web应用程序中使用XML数据。

幸好，你还有另外更好的可选方案。

二、JSON简介

javascript对象标志，简称JSON，是一种描述数据的轻量级语法。JSON的优越性基于这样的事实：它本身就是javascript语言的一个子集。你会在后面看到这种特征的重要性。首先，让我们比较一下JSON和XML的原始语法。

XML和JSON都使用结构化方法来标记数据。例如，一个地址簿应用程序可能提供一个Web服务—它将以XML形式生成如下的地址卡片：



 




Sean Kelly

SK Consulting



kelly@seankelly.biz

kelly@seankelly.tv





+1 214 555 1212

+1 214 555 1213

+1 214 555 1214





1234 Main St

Springfield， TX 78080-1216

5678 Main St

Springfield， TX 78080-1316





http://seankelly.biz/

http://seankelly.tv/

而使用JSON来表达，上面的形式将变成如下模样： 

{

"fullname": "Sean Kelly"，

"org": "SK Consulting"，

"emailaddrs": [

{"type": "work"， "value": kelly@seankelly.biz"}，

{"type": "home"， "pref": 1， "value": "kelly@seankelly.tv"}

]，

"telephones": [

{"type": "work"， "pref": 1， "value": "+1 214 555 1212"}，

{"type": "fax"， "value": "+1 214 555 1213"}，

{"type": "mobile"， "value": "+1 214 555 1214"}

]，

"addresses": [

{"type": "work"， "format": "us"，

"value": "1234 Main StnSpringfield， TX 78080-1216"}，

{"type": "home"， "format": "us"，

"value": "5678 Main StnSpringfield， TX 78080-1316"}

]，

"urls": [

{"type": "work"， "value": "http://seankelly.biz/"}，

{"type": "home"， "value": http://seankelly.tv/}

]

}

正如你所见，JSON也提供了一种具有嵌套数据元素的结构，就象XML一样。与XML一样，JSON也是基于文本的，且它们都使用 Unicode编码，且其与XML一样具有可读性。主观上来看，JSON更为清晰且冗余更少些。JSON网站提供了对JSON语法的严格描述，只是描述较 简短。从总体来看，XML比较适合于标记文档，而JSON却更适于进行数据交换处理。一个JSON文档的每一个实例都负责描述一个对象—具体的描述是通过 使用嵌套的对象，数组，字符串，数字，布尔值或null值来实现的。

上面地址卡例子的JSON版本更为小些，仅占用大约682字节的空间，而XML版本需要744字节空间。当然，这不是什么惊人的节省。其实，JSON的真正优点在于数据分析方面。





详谈基于JSON的高级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的对象发出请求。然后，由 该引擎来负责处理其它任务，包括把响应代理到在该请求中指定的回调方法中。下面的示例展示了我们如何使用这个引擎发出请求以及导入相关的文件：


以下是引用片段：
＜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”)的属性。

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




推荐到博客首页 (0) |  复制链接 |  评论: 0 |  阅读: 1950 |  个人分类: 技术 |  系统分类: 工作•职业•资料•技术 |  发表于: 2008.03.06 14:55

评论

表情 超链接
操作中，请等待...