• 数据交换格式,就是服务器端客户端之间进行数据传输与交换的格式
  • 前端领域,经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少,所以基本使用的数据交换格式就是 JSON

数据交换格式.png

JSON

  • 概念:JSON 的英文全称是 JavaScript Object Notation,即“JavaScript 对象表示法”。简单来讲,JSON 就是 Javascript 对象和数组的字符串表示法,它使用文本表示一个 JS 对象或数组的信息,因此,JSON 的本质是字符串
  • 作用:JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML,专门用于存储和传输数据,但是 JSON 比 XML 更小、更快、更易解析
  • 现状:JSON 是在 2001 年开始被推广和使用的数据格式,到现今为止,JSON 已经成为了主流的数据交换格式

JSON两种结构

JSON 就是用字符串来表示 Javascript 的对象和数组。所以,JSON 中包含对象数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构。

对象结构

对象结构在JSON中表示为{}括起来的内容,数据结构为{key:value,key:value,...}的键值对结构
其中,key必须是使用英文的双引号(必须是双引号"")包裹的字符串,value数据类型可以是数字(number)或者字符串(String)、布尔型(Boolean),null、数组(array)、对象(object)、null 6种类型
(注意没有underfined)””

  1. { //所以的对象的属性名需要用双引号""包裹
  2. "name":'yuanmou',
  3. "age":23,
  4. "address":null,
  5. "hobby":{"吃饭""睡觉""打豆豆"}
  6. }

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。
数组中数据的类型可以是数字(number)或者字符串(String)、布尔型(Boolean),null、数组(array)、对象(object)、null 6种类型 (注意还是没有underfined)

  1. ["java","python","php"]
  2. [100,200,300.5]
  3. [true,false,null]
  4. [{"name":"yuanmou","age":20},{"name":"yuequn","age":22}]

JSON语法注意事项

  1. 属性名必须使用双引号包裹
  2. 字符串类型的值必须使用双引号包裹
  3. JSON 中不允许使用单引号表示字符串
  4. JSON 中不能写注释
  5. JSON 的最外层必须是对象或数组格式
  6. 不能使用 undefined 或函数作为 JSON 的值

JSON 的作用:在计算机与网络之间存储和传输数据。
JSON 的本质:用字符串来表示 Javascript 对象数据或数组数据


JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
例如:

  1. //这是一个对象
  2. var obj ={a:'Hello',b:'world'}
  3. //这是一个JSON对象,本质是一个字符串
  4. let json ='{"a":"Hello","b":"World"}'

JSONG和JS对象互转

要实现从 JSON 字符串转换为 JS 对象,使用 JSON.parse() 方法:

  1. let obj = JSON.parse('{"a":"Hello","b":"World"}')
  2. //结果为 {a:'Hello',b:'world'}

要实现从 JS 对象转换为 JSON 字符串,使用 JSON.stringify() 方法:

  1. let obj = JSON.stringify({a:'Hello',b:'world'})
  2. //结果是'{"a":"Hello","b":"World"}'

浅析JSONS对象
关于JSON.parse()和JSON.stringify()方法详细介绍

序列化和反序列化

数据对象 转换为 字符串的过程,叫做序列化,例如:调用 JSON.stringify() 函数的操作,叫做 JSON 序列化。 把字符串 转换为 数据对象的过程,叫做反序列化,例如:调用 JSON.parse() 函数的操作,叫做 JSON 反序列化


应用场景

  1. var xhr = new XMLHttpRequest()
  2. xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
  3. xhr.send()
  4. xhr.onreadystatechange = function () {
  5. if (xhr.readyState === 4 && xhr.status === 200) {
  6. console.log(xhr.responseText)
  7. console.log(typeof xhr.responseText) //打印出来为JSON字符串型
  8. var result = JSON.parse(xhr.responseText)//转为JSON对象
  9. console.log(result)
  10. }
  11. }