用JSON技术加快AJAX程序开发

来源:赛迪blog (2006-06-22 11:55:51)

一、引言

当微软把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形式生成如下的地址卡片：

<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>kelly@seankelly.biz</address>
<address type='home' pref='1'>kelly@seankelly.tv</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>+1 214 555 1212</tel>
<tel type='fax'>+1 214 555 1213</tel>
<tel type='mobile'>+1 214 555 1214</tel>
</telephones>
<addresses>
<address type='work' format='us'>1234 Main St
Springfield， TX 78080-1216</address>
<address type='home' format='us'>5678 Main St
Springfield， TX 78080-1316</address>
</addresses>
<urls>
<address type='work'>" target=_blank></address>
<address type='home'>" target=_blank></address>
</urls>
</card>

而使用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与XML数据分析对比

借助于XMLHttpRequest对象，你可以从自己的基于AJAX的应用程序内部检索XML和JSON文件。典型情况下，你可以使用类似如下的交互：

var req = new XMLHttpRequest();
req.open("GET"，"http://localhost/addr?cardID=32"， /*async*/true);
req.onreadystatechange = myHandler;
req.send(/*no params*/null);

随着对Web服务器的不断响应，被你传递的处理器函数（在本例中是myHandler）被反复调用，这种特征提供给你一种时机—及早地取消事务，更新一个进度条，等等。通常，你只是在Web请求完成时才采取行动（应用返回的数据）。

为了处理上面地址卡程序的XML版本，myHandler的编码可以类似如下：