用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 object notation
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'>http://seankelly.biz/</address>
<address type='home'>http://seankelly.tv/</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"}
],
"teleph [
{"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. = myHandler;
req.send(/*no params*/null);
随着对Web服务器的不断响应,被你传递的处理器函数(在本例中是myHandler)被反复调用,这种特征提供给你一种时机—及早地取消事务,更新一个进度条,等等。通常,你只是在Web请求完成时才采取行动(应用返回的数据)。
为了处理上面地址卡程序的XML版本,myHandler的编码可以类似如下:
function myHandler() {
if (req.readyState == 4 /*完成*/) {
//用第一个街道地址更新表单中的地址域
var addrField = document.getElementById('addr');
var root = req.responseXML;
var addrsElem = root.getElementsByTagName('addresses')[0];
var firstAddr = addrsElem.getElementsByTagName('address')[0];
var addrText = fistAddr.firstChild;
var addrValue = addrText.nodeValue;
addrField.value = addrValue;
}
}
注意,你不必自己分析XML文档,分析任务可以由XMLHttpRequest对象为你自动完成。之后,这个XMLHttpRequest对象使得由分析生成的DOM树可应用于responseXML属性中。然后,你可以借助这个responseXML属性并调用getElementsByTagName方法来查找文档中的addresses部分,但仅能使用找到的第一个(其实只有一个)。然后,你再次在找到的address上调用getElementsByTagName方法来查找下一层中的第一个address元素,然后再次使用找到的第一个address……然后,你得到该元素的第一个DOM子结点(它是一个文本结点)并得到该结点的值(它正是你想找的街道地址)。最后,你就可以在表单域中显示它。
显然,这是一项工作量很大的工作!现在,让我们试用一下JSON:
function myHandler() {
if (req.readyState == 4 /*complete*/) {
var addrField = document.getElementById('addr');
var card = eval('(' + req.resp + ')');
addrField.value = card.addresses[0].value;
}
}
你需要做的第一件事情是手工地分析JSON响应。然而,因为JSON是JavaScript的一个子集,所以你可以通过调用eval方法使用JavaScript自己的编译器来完成这些。分析JSON是非常简单的!而且,在产生于JSON中的一个对象中导航与在任何JavaScript对象中导航完全一样。这比在DOM树中导航要容易得多。例如:
•card.addresses[0].value对应第一条街道地址:“1234 Main Stb &”;
•card.addresses[0].type对应地址的类型:“work”;
•card.addresses[1]对应一个家庭地址对象;
•card.fullname对应卡片名:“Sean Kelly”。
如果仔细观察,那么你可能注意到,示例程序的XML版本至少要处理包含在文档中的一个对象—根文档元素card。这在JSON版本中是不存在的。为什么?如果你曾开发过存取一个Web服务的JavaScript,那么你就会知道你要从Web服务中取回什么。然而,你可以在JSON中包括下面一种更为简练的形式:
{"card": {"fullname": ...}}
通过使用这一技术,你的JSON文件总是以一个对象开头并且用单个命名的属性来标记该对象的“类型”。
四、JSON的快速可靠性
JSON能够生成更小的文档,且其在JavaScript脚本中更易于使用。XMLHttpRequest能够为你自动分析XML文档,然而你必须手工分析JSON。这样以来,你可能质疑:分析JSON是否比分析XML更慢?对比JSON,我针对上面的地址卡测试了嵌入到XMLHttpRequest中的XML分析器—通过把这些数据置入上千次的循环中。最终结果表明,分析JSON比分析XML快大约10倍!如果想实现AJAX程序的行为类似于桌面应用程序,那么速度就是一切。很明显,JSON是胜者。
当然,你不可能一直控制为你的AJAX应用程序产生数据的服务器端。你可以使用一种第三方服务器来处理你的数据,而且让该服务器仅提供XML输出。然而,如果该服务器中恰巧能够提供JSON支持,那么你能否确定并敢于使用这一支持?
注意,在上面的示例中,你是直接把响应文本传递到一个对eval的调用中。如果你信任并控制了服务器,这是没有问题的;然而,另外一些情况下,一个恶意的服务器有可能给你的浏览器执行带来危险操作。为此,你最好使用一个用JavaScript编写的JSON分析器。幸好,已经存在可用的分析器了。
谈到分析器,Python迷们可能还没有注意到,JSON不仅是JavaScript的一个子集,而且它还是Python的一个子集。你可以直接在Python中使用JSON,或利用一种安全的JSON分析器。现在,针对于JSON的分析器也大量地存在于其它语言中;你可以参考JSON.org网站来选择使用相应的分析器。
五、服务器端技术对JSON的支持
到目前为止,我们一直集中于讨论如何把JSON应用于客户端浏览器上的基于AJAX技术的Web应用程序。当然,Web服务器端必须存在一定的技术支持才能实现首先生成JSON,然后由客户端使用JSON。幸好,基于现有数据结构创建JSON是一件相当直接的事情。另外,一些Web应用程序框架(例如TurboGears)已经自动包括支持JSON输出。
另外,商业Web服务供应商也都特别关注JSON。Yahoo最近在其Web服务中大量地加入对JSON的支持。Yahoo的多种搜索服务,旅行规划者,del.icio.us和高速公路交通服务都支持JSON输出。无疑,其它一些主要的Web服务供应商也都会逐渐地提供对JSON的支持。
六、结论
JSON的基本思想是,把自己实现为JavaScript(和Pyth 2.0开发中XML数据操作的主要替代者。任何开发者,无论是开发标准桌面应用程序还是开发Web应用程序,只要使用XML数据处理,都会欣赏JSON的简易特征。最后,我衷心祝愿JSON能加快你的基于AJAX技术的Web 2.0应用程序的开发。
posted @ 2008-05-23 16:20 meetrice 阅读(...) 评论(...) 编辑 收藏