使用JSON加速AJAX

使用JSON加速AJAX
By Sean Kelly

来源：http://blog.csdn.net/Jekeyhua/archive/2006/05/03/707257.aspx

当微软在IE中添加了用于执行JavaScript的ActiveX XMLHTTP对象以后，仿佛播下了AJAX这一Web应用开发的革命的火种。如今，Firefox, Safari, Opera, 以及其他的浏览器都提供了XMLHttpRequest，使得他们可以访问colr.org, backpackit.com, maps.google.com.这些网站的特点就是它们的应用程序表现和感觉和其他桌面应用程序一样，尽管他们运行在浏览器里边。

在AJAX里边，当用户查看和与页面交互的时候，页面的JavaScript代码向web服务器请求数据（AJAX里的“异步”）。这些请求是HTTP请求，就像一个浏览器在第一个地方取得页面，其中可以包括任意图片，样式表等等。同样的，XMLHttpRequest对象也可以用来取得各种数据，不只是XML。例如，JavaScript可以使用XMLHttpRequest从web服务器取得一个普通文本文件，并在一个表单里边显示其内容。

XMLHttpRequest对象通过查找位于数据前端的Content-type header来分析从web服务器返回的数据的MIME类型。例如，如果类型是text/plain，你可以通过检查XMLHttpRequest对象的responseText属性来访问该文本。但是，如果类型是text/xml，XMLHttpRequest对象有一个特殊的步骤：它对返回的文档运行一个XML解析，并在内存中建立一个文档对象模型（DOM）树来描述文档，使得文档在responseXML属性中可用。然后，你就可以使用JavaScript的标准DOM方法来操纵这个对象树并访问每个元素，属性以及树里的其他文本。

XML是交换数据的标准方法，但通常不是最好的方法。尽管XML可以为数据添加结构和元数据，但这确实是一个比较麻烦的方法。XML还有相当复杂的语法，需要一个解析器类解析它。在JavaScript中，XML必须被解析为DOM树才可以使用。并且，一旦构建了DOM树，你还不得不通过建立相应的JavaScript对象或其他方法才能在客户端应用程序中使用XML数据。

幸运的是，还有更好的办法。

使用JSON
JSON也就是JavaScript Object Notation，是一个描述数据的轻量级语法。JSON的优雅是因为它是JavaScript语言的一个子集。接下来你将看到它为什么如此重要。首先，来比较一下JSON和XML语法。

JSON和XML都使用结构化方法描述数据。例如一个地址簿应用程序可以提供用来产生XML格式的地址卡的web服务：
<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>[e-mail]</address>
<address type='home' pref='1'>[e-mail]</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>[phone]</tel>
<tel type='fax'>[phone]</tel>
<tel type='mobile'>[phone]</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": "[e-mail]"},
{"type": "home", "pref": 1, "value": "[e-mail]"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "[phone]"},
{"type": "fax", "value": "[phone]"},
{"type": "mobile", "value": "[phone]"}
],
"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相似。JSON也是基于文本的，XML也是如此。两者都使用Unicode。JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。JSON WEB站点严格地描述了JSON语法，目前就是这样的。它确实是一个简单的小语言！ XML确实适合标记文档，但是JSON是数据交互的理想格式。每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布尔值或空值。

在这些地址卡例子代码中，JSON版本是更轻量级的，只占用了682字节的空间，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。

XML对比JSON：地位丧失
通过使用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的代码如下：

function myHandler() {
if (req.readyState == 4 /*complete*/) {
// Update address field in a form with first street address
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对象自动地解析了，并使responseXML中的DOM树可用。通过使用responseXML属性，可以调用getElementsByTagName方法查找文档的地址部分，你还可以使用第一个去找到它。然后，可以再次调用getElementsByTagName在地址部分查找第一个地址元素。这就取得了文档的第一个DOM子节点，就是一个文本节点，并取得节点的值，这就是你想要的街道地址。最后，可以在表单域中显示结果。

确实不是一个简单的工作，现在，使用JSON再试一下：
function myHandler() {
if (req.readyState == 4 /*complete*/) {
var addrField = document.getElementById('addr');
var card = eval('(' + req.responseText + ')');
addrField.value = card.addresses[0].value;
}
}
你所做的第一件事情就是解析JSON响应。但是，因为JSON是JavaScript的一个子集，你可以使用JavaScript自己的编译器来解析它，通过调用eval函数。解析JSON仅需要一行！此外，操纵JSON中的对象就像操纵其他JavaScript对象一样。这显然要比通过DOM树来操纵简单，例如：
card.addresses[0].value 是第一个街道地址, "1234 Main Stb &"
card.addresses[0].type 是地址类型, "work"
card.addresses[1] 是家庭地址对象
card.fullname 是card的名称, "Sean Kelly"
如果更仔细观察，你可能会发现XML格式中文档至少有一个跟元素，card。这在JSON里是不存在的，为什么？ 大概就是，如果你正在开发JavaScript来访问Web服务，你已经知道你想要得到的。然而，你可以在JSON中这么使用：
{"card": {"fullname": ...}}
使用这个技术，你的JSON文件总是以一个带有单一命名属性的对象开始，该属性标识了对象的种类。

JSON是快速可靠的吗？
JSON提供轻量的小文档，并且JSON在JavaScript更容易使用。XMLHttpRequest自动为你解析了XML文档，而你还要手工解析JSON文件，但是解析JSON比解析XML更慢么？作者通过几千次的反复测试，使用XMLHttpRequest解析XML和解析JSON，结果是解析JSON比XML要快10倍！当把AJAX当作桌面应用看待时，速度是最重要的因素，很明显，JSON更优秀。

当然，你不能总是控制服务器端来为AJAX程序产生数据。你还可以使用第三方服务器代替服务器提供XML格式的输出。并且，如果服务器恰好提供JSON，你可以确定你真的想使用它吗?

代码中值得注意的是，你将响应文本直接传入到eval中。如果你控制着服务器，就可以这么做。如果不是，一个恶意服务器可以使你的浏览器执行危险操作。在这样的情况下，你最好使用写在JavaScript中的代码来解析JSON。幸运地，这已经有了。

说到解析，Python爱好者可能注意到JSON不只是JavaScript的子集，它还是Python的一个子集。你可以在Python中直接执行JSON，或者使用安全JSON解析代替。JSON.org网站列举了许多常用JSON解析器。

服务器端的JSON
到现在为止，你或许将焦点注意在运行在客户浏览器中的基于AJAX的web应用程序使用JSON。自然地，首先，JSON格式的数据必须在服务器端产生。幸运地是，创建JSON或将其他存在的数据转换成JSON是相当简单的。一些WEB应用程序框架，例如TurboGears，自动包括对JSON输出的支持。

此外商业WEB服务提供商也注意到了JSON。Yahoo最近创建了许多基于JSON的web服务。Yahoo的多种搜索服务，履行计划，del.icio.us，还有高速公路交通服务也都支持JSON输出。毫无疑问，其他主要WEB服务提供商也将加入到对JSON的支持中。

总结
JSON的聪明在于它是JavaScript和Python的子集，使得它更易用，为AJAX提供高效的数据交互。它解析更快，比XML更易使用。JSON正成为现在“Web 2.0”的最强音。每个开发者，无论是标准桌面应用程序或Web应用程序，越来越注意到了它的简单和便捷。我希望你能体会到在buzzword-compliant, Web-2.0-based, AJAX-enabled, 敏捷开发中应用到JSON的乐趣。

关于作者
Sean Kelly 是一个希腊神话和喜剧爱好者，注意到了AJAX和JSON的潜在作用。他的AJAX团队Argonauts打算解决在web应用开发，python，AJAX，java，web服务以及令人生厌的XML中的各种问题。他在医学，天文学以及数字媒体工业等方面都有研究，还坚持每天都做瑜伽。他和他妻子Mary以及女儿Ariana居住在一个不为人知的地方。