JavaScript JSON 新手入门文档

JSON 概述与数据格式对比

若已阅读本系列前文，应对数据格式有相当了解。前文阐述了在诸多异步应用中如何恰当使用纯文本及简单的键值对。数据可组合为如下形式：

firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

如此即可，无需额外操作。实际上，Web 资深开发者会意识到，通过 GET 请求发送的信息正是采用此格式。

随后，本系列探讨了 XML。显然，XML 获得了大量关注（褒贬不一），并已在 Ajax 应用中得到广泛应用。关于 XML 数据格式的使用，可回顾本系列前文：

<request>

 <firstName>Brett</firstName>

 <lastName>McLaughlin</lastName>

 <email>brett@newInstance.com</email>

</request>

此处数据与前文所见相同，但此次采用 XML 格式。这并无新奇之处；这仅是另一种数据格式，使我们得以使用 XML 而非纯文本和键值对。

本文探讨另一种数据格式：JavaScript Object Notation（JSON）。JSON 显得既熟悉又陌生。它提供了另一种选择，选择范围更广总是好事。

引入 JSON

在使用键值对或 XML 时，实际上是使用 JavaScript 从应用程序中获取数据，并将其转换为另一种数据格式。在这些场景下，JavaScript 在很大程度上充当数据操纵语言，用于移动和处理来自 Web 表单的数据，并将其转换为适合发送给服务器端程序的格式。

然而，有时 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅仅是将来自 Web 表单的数据放入请求中。在这些场景下，从 JavaScript 对象中提取数据，然后再将其放入键值对或 XML 中，显得有些多余。此时便适合使用 JSON：JSON 允许轻松地将 JavaScript 对象转换为可随请求发送的数据（无论同步或异步）。

JSON 并非万能药；但对于某些非常特定的情况，它是极佳的选择。

JSON 基础语法与结构

JSON 基础

简而言之，JSON 可将 JavaScript 对象中表示的一组数据转换为字符串，从而可在函数间轻松传递该字符串，或在异步应用程序中将字符串从 Web 客户端传递给服务器端程序。该字符串看起来有些古怪（稍后将看到几个示例），但 JavaScript 很容易解析它，且 JSON 可表示比键值对更复杂的结构。例如，可表示数组和复杂对象，而不仅仅是键和值的简单列表。

简单 JSON 示例

按最简单形式，可用如下 JSON 表示键值对：

{ "firstName": "Brett" } 

此示例非常基础，且实际上比等效的纯文本键值对占用更多空间：

firstName=Brett

然而，当将多个键值对串联在一起时，JSON 便体现出其价值。首先，可创建包含多个键值对的记录，例如：

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

从语法角度看，这与键值对相比并无显著优势，但在此情况下 JSON 更易使用，且可读性更佳。例如，它明确表示以上三个值属于同一记录；花括号使这些值建立了某种联系。

值的数组

当需要表示一组值时，JSON 不仅能提高可读性，还能降低复杂性。例如，假设希望表示一个人名列表。在 XML 中，需要大量开始标记和结束标记；如果使用典型的键值对（如本系列前文所见），则必须建立专有数据格式，或将键名修改为 person1-firstName 这样的形式。

如果使用 JSON，只需将多个带花括号的记录分组在一起：

{ "people": [

 { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

 { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

 { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

]}

这不难理解。在此示例中，只有一个名为 people 的变量，其值是包含三个条目的数组，每个条目是一个人的记录，包含名、姓和电子邮件地址。上述示例演示了如何用括号将记录组合成一个值。当然，可使用相同语法表示多个值（每个值包含多个记录）：

{ "programmers": [

 { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

 { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

 { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

 ],

"authors": [

 { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

 { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

 { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

 ],

"musicians": [

 { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

 { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

 ]

}

此处最值得注意的是，能够表示多个值，每个值进而包含多个值。但还应注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的键值对可以不同。JSON 是完全动态的，允许在 JSON 结构中间改变表示数据的方式。

在处理 JSON 格式的数据时，没有需要遵守的预定义约束。因此，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。

JavaScript 中 JSON 的操作与序列化

在 JavaScript 中使用 JSON

掌握 JSON 格式后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

将 JSON 数据赋值给变量

例如，可创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

var people =

 { "programmers": [

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

   ],

 "authors": [

    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

   ],

 "musicians": [

    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

   ]

 }

这非常简单；现在 people 包含前文看到的 JSON 格式数据。但这还不够，因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显，但上述长字符串实际上只是一个数组；将该数组放入 JavaScript 变量后，便可轻松访问它。实际上，只需使用点号表示法来表示数组元素。因此，若想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用如下代码：

people.programmers[0].lastName;

注意，数组索引从零开始。因此，这行代码首先访问 people 变量中的数据；然后移动到称为 programmers 的条目，再移动到第一个记录（[0]）；最后，访问 lastName 键的值。结果是字符串值 “McLaughlin”。

以下是使用同一变量的几个示例。

people.authors[1].genre                       // Value is "fantasy"

people.musicians[3].lastName          // Undefined. This refers to the fourth entry,

 and there isn't one

people.programmers.[2].firstName      // Value is "Elliotte"

利用此类语法，可处理任何 JSON 格式的数据，而无需使用任何额外的 JavaScript 工具包或 API。

修改 JSON 数据

正如可用点号和括号访问数据，也可按同样方式轻松修改数据：

people.musicians[1].lastName = "Rachmaninov";

在将字符串转换为 JavaScript 对象后，便可像这样修改变量中的数据。

转换回字符串

当然，如果不能轻松地将对象转换回本文提及的文本格式，那么所有数据修改的价值都不大。在 JavaScript 中这种转换也很简单：

String newJSONtext = people.toJSONString();

如此即可！现在便获得了一个可在任何地方使用的文本字符串，例如，可将其用作 Ajax 应用程序中的请求字符串。

更重要的是，可将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：

String myObjectInJSON = myObject.toJSONString();

这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，即可获得经过格式化的数据，可直接使用。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习该 API 并使用 API 的对象，而不是使用原生的 JavaScript 对象和语法。

最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可在请求中发送给服务器端程序的格式。

结束语

本系列已用大量时间讨论数据格式，这主要是因为几乎所有异步应用程序最终都要处理数据。如果掌握了发送和接收所有类型数据的各种工具和技术，并按照最适合每种数据类型的方式使用它们，那么就能够更精通 Ajax。在掌握 XML 和纯文本的基础上，再掌握 JSON，便能够在 JavaScript 中处理更复杂的数据结构。

本系列中的下一篇文章将讨论发送数据以外的问题，深入介绍服务器端程序如何接收和处理 JSON 格式的数据。还要讨论服务器端程序如何跨脚本和服务器端组件以 JSON 格式发送回数据，这样就可以将 XML、纯文本和 JSON 请求和响应混合在一起。这可以提供很大的灵活性，可以按照几乎任何组合结合使用所有这些工具。