从菜鸟到入门,掌握 JSON

2017-02-22 08:06:09来源:CSDN作者:qq_35246620人点击

1 简介

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,其基于 ECMAScript 的一个子集。 JSON 采用完全独立于语言的文本格式,但是也使用了类似于 C 语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等),这些特性使 JSON 成为理想的数据交换语言。JSON 易于人阅读和编写,同时也易于机器解析和生成,常用于提升网络传输速率。

2 JSON语法

2.1 语法规则

JSON 语法是 JavaScript 对象表示语法的子集,具体如下:

  • 数据在键值对中;
  • 数据由逗号分隔;
  • 花括号保存对象;
  • 方括号保存数组。

2.2 名称/值对

JSON 数据的书写格式是:名称/值对。
在“名称/值对”的组合中,名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:

"firstName" : "Charies"

这条 JSON 语句等价于下面这条 JavaScript 语句:

firstName = "Charies"

其中,JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

2.3 基础结构

JSON 有两种结构,分别是:对象和数组,通过这两种结构可以表示各种复杂的结构。而且简单点来说, JSON 就是 JavaScript 中的对象和数组。

  1. 对象:对象在 JS 中表示为“{}”括起来的内容,数据结构为 {key : value, key : value, …} 的键值对的结构,在面向对象的语言中,key 为对象的属性,value 为对应的属性值,所以很容易理解,取值方法为“对象.key”获取属性值,这个属性值的类型可以是数字、字符串、数组、对象几种。
  2. 数组:数组在 JS 中是中括号“[]”括起来的内容,数据结构为 [“Java”, “Android”, “iOS”, …],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是数字、字符串、数组、对象几种。

通过对象和数组这两种基础结构,咱们就可以自由的组合成复杂的数据结构啦!

3 用法示例

3.1 示例一

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><h2>在 JavaScript 中创建 JSON 对象</h2><p>Name: <span id="jname"></span><br />Age: <span id="jage"></span><br />Address: <span id="jstreet"></span><br />Phone: <span id="jphone"></span><br /></p><script type="text/javascript">    var JSONObject = {        "name" : "维C果糖",        "street" : "WanTong D 10 YEEPAY Company Limited",        "age" : 18,        "phone":"5211314"};        document.getElementById("jname").innerHTML = JSONObject.name        document.getElementById("jage").innerHTML = JSONObject.age        document.getElementById("jstreet").innerHTML = JSONObject.street        document.getElementById("jphone").innerHTML = JSONObject.phone</script></body></html>

运行后,页面如下所示:

json1

3.2 示例二

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><h2>通过 JSON 字符串来创建对象</h3>    <p>First Name: <span id="fname"></span></p>     <p>Last Name: <span id="lname"></span></p> <script type="text/javascript">    var employees = [        { "firstName" : "Bill" , "lastName":"Gates" },        { "firstName" : "George" , "lastName":"Bush" },        { "firstName" : "Thomas" , "lastName": "Carter" }    ];    document.getElementById("fname").innerHTML = employees[0].firstName;    document.getElementById("lname").innerHTML = employees[0].lastName;</script></body></html>

运行后,页面如下所示:

json2

4 与XML的异同

4.1 可读性

JSON 和 XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负。

4.2 可扩展性

XML 天生有很好的扩展性,JSON 当然也有,没有什么是 XML 可以扩展而 JSON 却不能扩展的。不过 JSON 在 Javascript 主场作战,可以存储 Javascript 复合对象,有着 XML 不可比拟的优势。

4.3 编码难度

XML 有丰富的编码工具,比如 Dom4j、JDom等,JSON 也有提供的工具。无工具的情况下,相信熟练的开发人员一样能很快的写出想要的XML 文档和 JSON 字符串,不过相比之下,XML 文档要多很多结构上的字符。

4.4 解码难度

XML 的解析方式有两种:一种是通过文档模型解析,也就是通过父标签索引出一组标记,但是这得在预先知道文档结构的情况下使用,无法进行通用的封装;另外一种方法是遍历节点(document 以及 childNodes),这个可以通过递归来实现,不过解析出来的数据仍旧是形式各异,往往也不能满足预先的要求。

JSON 也同样如此,如果预先知道 JSON 结构的情况下,使用 JSON 进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码。而如果不知道 JSON 的结构而去解析 JSON 的话,那简直是噩梦。费时费力不说,代码也会变得冗余拖沓,得到的结果也不尽人意。但是这样也不影响众多前台开发人员选择 JSON,因为 json.js 中的 toJSONString() 就可以看到 JSON 的字符串结构。

除了上述之外,JSON 和 XML 还有另外一个很大的区别在于有效数据率。JSON 作为数据包格式传输的时候具有更高的效率,这是因为 JSON 不像 XML 那样需要有严格的闭合标签,这就让有效数据量与总数据包比大大提升,从而减少同等数据流量的情况下网络的传输压力。


参考文献:

[1] JSON - 百度百科
[2] JSON教程 - W3School


———— ☆☆☆ —— 返回 -> 菜鸟教程系列 <- 目录 —— ☆☆☆ ————

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台