• JSON的来历

• JSON的格式

• JSON VS XML

当微软在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服务：

Sean Kelly

SK Consulting

kelly-AT-seankelly-DOT-biz

使用JSON, 形式如下:

{

“fullname“: “Sean Kelly”,

“org“: “SK Consulting”,

“emailaddrs”: [

{“type“: “work“, “value“: “kelly-AT-seankelly.biz”},

{“type“: “home“, “pref“: 1, “value“: “kelly-AT-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相似。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 Object Notation / JavaScript 对象标志 ) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。
JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

 
本文将解释如何使用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”）的属性。

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

四、 把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 onload = " document.getElementById('body').innerHTML = '＜b＞Local objects serialized as JSON＜/b＞
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  +=   "
        ＜b＞Remote JSON unserialized＜ / b＞ " ;
    　　document.getElementById( " body " ).innerHTML  +=   "
        Car color:  " +Auto.Car.color;
    　　document.getElementById( " body " ).innerHTML  +=   "
        Wheel color:  " +Auto.Car.Wheel.color;
    　}
    }
＜ / script＞ 

　　这是相当激动人心的一部分！一旦我们拥有了该responseText，我们就能够简单地使用JSON分析器中的parseJSON方法来从串行化的数据中重建我们的Auto对象。借助于这个新的Auto对象，我们就可以调用相应的子对象。这个特征允许我们在服务器和客户端来回发送对象—而不必进行大量的分析工作，然而在以前标准的XML响应情况下我们将却必须这样做。这样一来，我们就可以创建出能够基于AJAX技术来保留自身状态的客户端JavaScript对象。