javascript json Beginner's Getting Started Document_json

如果您阅读了本系列前面的文章，那么应已对数据格式有了相当的认识。前面的文章解释了在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对。可以将数据组合成下面这样的形式：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com</span>

 

这样就行了，不需要再做什么了。实际上，Web 老手会意识到通过 GET 请求发送的信息就是采用这种格式。

然后，本系列讨论了 XML。显然，XML 得到了相当多的关注（正面和负面的评价都有），已经在 Ajax 应用程序中广泛使用。关于如何使用 XML 数据格式，可以回顾 本系列前面的文章：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"><request></span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> <firstName>Brett</firstName></span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> <lastName>McLaughlin</lastName></span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> <email>brett@newInstance.com</email></span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"></request></span>

 

这里的数据与前面看到的相同，但是这一次采用 XML 格式。这没什么了不起的；这只是另一种数据格式，使我们能够使用 XML 而不是纯文本和名称/值对。

本文讨论另一种数据格式，JavaScript Object Notation（JSON）。JSON 看起来既熟悉又陌生。它提供了另一种选择，选择范围更大总是好事情。

添加 JSON

在使用名称/值对或 XML 时，实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下，JavaScript 在很大程度上作为一种数据操纵语言，用来移动和操纵来自 Web 表单的数据，并将数据转换为一种适合发送给服务器端程序的格式。

但是，有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅是将来自 Web 表单的数据放进请求中。在这些情况下，从 JavaScript 对象中提取数据，然后再将数据放进名称/值对或 XML，就有点儿多此一举 了。这时就合适使用 JSON：JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据（同步或异步都可以）。

JSON 并不是某种魔弹；但是，它对于某些非常特殊的情况是很好的选择。

 

 

JSON 基础

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

简单 JSON 示例

按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">{ "firstName": "Brett" } </span>

 

这个示例非常基本，而且实际上比等效的纯文本名称/值对占用更多的空间：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">firstName=Brett</span>

 

但是，当将多个名称/值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称/值对的记录，比如：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }</span>

 

从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的名称/值对（就像在本系列前面文章中看到的那种名称/值对），那么必须建立一种专有的数据格式，或者将键名称修改为 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">person1-firstName</font></span> 这样的形式。

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

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">{ "people": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">]}</span>

 

这不难理解。在这个示例中，只有一个名为 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">people</font></span> 的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">{ "programmers": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> ],</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">"authors": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> ],</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">"musicians": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> ]</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">}</span>

 

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

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

 

 

在 JavaScript 中使用 JSON

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

将 JSON 数据赋值给变量

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

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">var people =</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> { "programmers": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">   ],</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> "authors": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">   ],</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> "musicians": [</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">   ]</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> }</span>

 

这非常简单；现在 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">people</font></span> 包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">people.programmers[0].lastName;</span>

 

注意，数组索引是从零开始的。所以，这行代码首先访问 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">people</font></span> 变量中的数据；然后移动到称为 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">programmers</font></span> 的条目，再移动到第一个记录（<span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">[0]</font></span>）；最后，访问 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">lastName</font></span> 键的值。结果是字符串值 “McLaughlin”。

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

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">people.authors[1].genre                       // Value is "fantasy"</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">people.musicians[3].lastName          // Undefined. This refers to the fourth entry,</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt"> and there isn't one</span>

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">people.programmers.[2].firstName      // Value is "Elliotte"</span>

 

利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。

修改 JSON 数据

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

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">people.musicians[1].lastName = "Rachmaninov";</span>

 

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

转换回字符串

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

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">String newJSONtext = people.toJSONString();</span>

 

这样就行了！现在就获得了一个可以在任何地方使用的文本字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是，可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 <span style="COLOR: black; FONT-SIZE: 10.5pt"><font face="新宋体">myObject</font></span> 的对象进行转换，只需执行相同形式的命令：

<span style="FONT-FAMILY: 'Lucida Console'; COLOR: black; FONT-SIZE: 10.5pt">String myObjectInJSON = myObject.toJSONString();</span>

This is the biggest difference between JSON and the other data formats discussed in this series. If you use JSON, you only need to call a simple function to get the formatted data, which can be used directly. For other data formats, conversion between raw and formatted data is required. Even if you use Document Object Model such as API (which provides functions to convert your own data structure into text), you still need to learn This API and uses the API object instead of using native JavaScript Objects and syntax.

The final conclusion is that if you are dealing with a large number of JavaScript objects, then JSON is almost certainly a good choice, This makes it easy to convert the data into a format that can be sent to the server-side program in the request.

Conclusion

This series has spent a lot of time discussing data formats, mainly because almost all asynchronous applications will eventually process data. You'll become more proficient in Ajax if you master the various tools and techniques for sending and receiving all types of data, and use them in the way that works best for each data type. On the basis of mastering XML and plain text, then master JSON, so that you can use JavaScript .

The next article in this series will discuss issues beyond sending data, providing an in-depth look at how server-side programs receive and process data in the JSON format. Also discuss how server-side programs can send data back in the format of JSON across scripts and server-side components, so that XML, Plain text and JSON requests and responses mixed together. This provides a lot of flexibility to use all of these tools in almost any combination.