11.4　JSON

发送来自服务器的数据的另一种常用格式叫做JSON（JavaScript Object Notation）。JSON是使用JavaScript编写的一种数据格式，并且它类似于XML（参见本章中的“高级用户提示：接收来自服务器的XML”部分），因为它是交换数据的一种方法。

注意：然而，对于Ajax应用程序，JSON有两个主要的好处：第一，数据存储在JavaScript中，因此JavaScript程序很容易操作它；第二，我们可以请求来自其他域的JSON，因此，例如，我们可以请求来自Flickr（www.flickr.com）的图像并且在自己站点的页面上显示它（正如11.3.1节中的“注意”所介绍的，通常我们只能对自己的域进行一个Ajax请求）。

我们将在本节学习了如何创建JSON。实际上，JSON只是一个JavaScript对象直接量，或者是名/值对的一个集合。下面是一个简单的JSON：

{

firstName：'Frank'，

lastName：'Smith'，

phone：’503-555-1212’

}

{表示JSON对象的开始，而}表示其结束。在这之间是成组的名/值对，例如，firstName：'Frank'。每个名/值对用一个逗号隔开，但是，在最后一对的末尾不能放置逗号（否则，Internet Explorer将会产生一个错误）。

注意：或者，我们可以把名/值对中的名字也放入到引号中，如下所示：

{

'firstName'：'Frank'，

'lastName'：'Smith'，

'phone'：’503-555-1212’

}

如果名字中有一个空格或者其他的非文字数字的字符，我们必须使用引号。

可以把名/值对看做一个变量，名就是变量的名字，而值就是存储在变量中的值。在上面的例子中，lastName就像是一个变量，而字符串'Smith'存储在其中。

当Web服务器响应一个Ajax请求，它可能返回格式化为JSON的一个字符串。服务器不会真正地发送JavaScript，它只是发送格式化为一个JSON对象的文本。在字符串转换为一个真正的JSON对象之前，它不是一个真正的、有用的JavaScript。幸运的是，jQuery提供了一个特殊的函数getJSON（），它负责所有的细节。getJSON（）函数的样子和作用与get（）和post（）函数很相似。其基本的结构如下所示：

$.getJSON（url, data, callback）；

传递给该函数的3个参数和get（）与post（）函数的参数相同，分别是服务器端页面的URL、发送给服务器端页面的数据，以及回调函数的名字。不同之处在于，getJSON（）将处理来自服务器的响应（这只是一个字符串）并（通过一些JavaScript魔术）将其转换为一个可用的JSON对象。

注意：PHP 5.2有一个内置的函数，使得我们很容易从一个传统的PHP数组来创建一个JSON对象。因此，对于Ajax应用程序，可以接收一个PHP数组并且快速将其转换为一个JSON对象，以返回给Web浏览器中等待的JavaScript代码。请访问www.php.net/manual/en/function.json-encode.php了解更多信息。

换句话说，getJSON（）的作用和post（）或get（）相似，只不过传递给回调函数的数据是一个JSON对象。要使用getJSON（）函数，我们只需要了解如何使用回调函数处理一个JSON对象。举一个基本的例子，假设想要使用Ajax来请求名为contacts.php的服务器端文件中的一个联络人的相关信息，该文件返回了JSON格式的联络人数据（就像前面的JSON示例）。基本的请求可能如下所示：

$.getJSON（'contacts.php'，'contact=123’，processContacts）；

这行代码向contacts.php发送一个查询字符串contact=123。假设contacts.php使用该信息在一个数据库中找到一个单个的联络人，并且获取联络人的信息。结果送回到Web浏览器并且传递给回调函数processContacts。回调函数的基本结构如下所示：

function processContacts（data）{

}

processContacts（）函数有一个参数：data，其中包含了来自服务器的JSON对象。让我们看看回调函数如何访问JSON对象中的信息。

11.4.1　访问JSON数据

有两种方式访问一个JSON对象中的数据：点语法或数组表示法。点语法（参见2.10节）是表示对象的属性的一种方法，具体地说，在对象名以及想要访问的属性之间添加一个点号。我们已经看到这种方法用于不同的JavaScript对象的属性，例如字符串和数组。例如，'abc'.length访问该字符串的length属性，并且，在这个例子中，返回了字符串'abc'中的字符的数目，即3。

例如，假设创建了一个变量并且将一个对象直接量存储到其中，如下所示：

var bday={

person：'Raoul'，

date：’10/27/1980’

}；

在这个例子中，变量bday包含了该对象直接量，因此，如果想要获取对象中的person的值，可以像下面这样使用点语法：

bday.person//'Raoul'

要获取出生日期：

bday.date//’10/27/1980’

这同样适用于Web服务器返回的一个JSON对象。例如，以下面的getJSON（）和回调函数为例：

$.getJSON（'contacts.php'，'contact=123’，processContacts）；

function processContacts（data）{

}

假设服务器返回了11.4节所示的JSON，该JSON对象赋给了变量data（回调函数processContacts（）的参数），就好像执行了如下的代码：

var data={

firstName：'Frank'，

lastName：'Smith'，

phone：’503-555-1212’

}；

现在，在回调函数中，我们可以像下面这样访问firstName的值：

data.firstName//'Frank'

并且像下面这样获取联系人的lastName：

data.lastName//'Smith'

因此，假设这个小小的Ajax程序的整个任务是获取联络人信息并将其显示在ID为info的一个＜div＞中。完成此任务的所有程序可能如下所示：

$.get JSON（'contacts.php'，'contact=123’，processContacts）；

function processContacts（data）{

var infoHTML=’＜p＞Contact：’+data.frstName；

infoHTML+=’’+data.lastName+’＜br＞’；

infoHTML+='Phone：’+data.phone+’＜/p＞’；

$（'#info'）.html（infoHTML）；

}

将要添加到页面的最终输出如下所示：

Contact：Frank Smith

Phone：503-555-1212