在异步应用程序中发送和接收信息时,能够选择以纯文本和 XML 做为数据格式。掌握 Ajax 的这一期讨论另外一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地在应用程序中移动数据和对象。 web
若是您阅读了本系列前面的文章,那么应已对数据格式有了至关的认识。前面的文章解释了在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对。能够将数据组合成下面这样的形式: ajax
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 并非某种魔弹;可是,它对于某些很是特殊的状况是很好的选择。 ui
|
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
掌握了 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 请求和响应混合在一块儿。这能够提供很大的灵活性,能够按照几乎任何组合结合使用全部这些工具。
xml的写法:
<contact>
<friend>
<name>Michael</name>
<email>17bity@gmail.com</email>
<homepage>http://www.jialing.net</homepage>
</friend>
<friend>
<name>John</name>
<email>john@gmail.com</email>
<homepage>http://www.john.com</homepage>
</friend>
<friend>
<name>Peggy</name>
<email>peggy@gmail.com</email>
<homepage>http://www.peggy.com</homepage>
</friend>
</contact>
而JSON:
[
{
name:"Michael",
email:"17bity@gmail.com",
homepage:"http://www.jialing.net"
},
{
name:"John",
email:"john@gmail.com",
homepage:"http://www.jobn.com"
},
{
name:"Peggy",
email:"peggy@gmail.com",
homepage:"http://www.peggy.com"
}
]
JSON的格式:
1,对象:
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"}
{ 属性 : 值 , 属性 : 值 , 属性 : 值 }
2,数组是有顺序的值的集合。一个数组开始于"[",结束于"]",值之间用","分隔。
[
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"},{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"},
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"}
]
3, 值能够是字符串、数字、true、false、null,也能够是对象或数组。这些结构都能嵌套。