数据交换格式就是服务器端与客户端之间进行数据传输与数据交换的格式。
前端领域经常提到的两种数据交换格式有JSON、XML。其中XML用的非常少,我们重点要学习的数据交换格式就是JSON。
1.什么是XML
XML即可扩展的标记语言,因此XML与HTML类似,也是一种标记语言。
2.与HTML的区别:
他们虽然都是标记语言,但是 他们两个之间没有任何关系。
HTML被设计用来描述网页上的内容,是网页内容的载体。
XML被设计用来传输和存储数据,是数据的载体。
3.XML缺点
XML格式臃肿,与数据无关的代码较多,体积大,传输效率低。
在JavaScript解析XML比较麻烦。
1.什么是JSON
概念:JavaScript Object Notation。 即‘JavaScript对象表示法’。简单来讲,JSON就是JavaScript的对象和数组的字符串表示法,它使用文本表示一个Js对象或数组的信息,因此,JSON的本质是字符串。
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析。
现状:现在主流的数据交换格式。
JSON的两种结构:
JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON包含对象和数组两种结构,通过这两种结构互相嵌套,可以表示各种复杂的数据结构。
对象结构: 对象结构在JSON中表示为{}括起来的内容。数据结构为:{key:value,key:value,...}的键值对结构。其中,key必须是使用英文的双引号包裹的字符串,value的数据类型可以是数字、字符串、布尔值、null、数组、对象6中类型。 JSON中所有的字符串都必须用双引号来包裹。
以下左侧是6种错误的 JSON数据结构,右边为修正后的结构。
数组结构:数组结构在JSON中表示为[]括起来的内容。数据结构为["java","javascript",30,true...]。
数组中数据的类型可以是:数字、字符串、布尔值、null、数组、对象6种类型。
以下是数组结构的例子:
JSON语法注意事项:
1.属性名必须使用双引号包裹
2.字符串类型的值必须用双引号来包裹
3.JSON不能使用单引号来表示字符串
4.JSON中不能写注释
5.JSON最外层必须是对象或数组格式
6.不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
本质:用字符串来表示javascript对象数据或数组数据。
JSON与JS对象的关系:
JSON是js对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。
例如:
//这是一个对象
var obj = {a: 'hello', b: 'world'}
//这是一个JSON字符串
var json = '{"a": "hello", "b": "world"}'
JSON与js对象的互转:
要实现从JSON字符串转换为JS对象,使用JSON.parse() 方法:
var obj = JSON.parse('{"a": "hello", "b": "world"}')
打印出来后结果是:
要实现从js对象转换为JSON字符串,使用JSON.stringify()方法:
var json = JSON.stringify({a: 'hello', b: 'world'})
打印结果是:
应用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
//1.创建xhr对象
var xhr = new XMLHttpRequest()
//2.调用open函数
xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
//3.调用send函数
xhr.send()
//4.监听 onreadystatechange事件
xhr.onreadystatechange = function() {
//注意这里的status与打印出来的status不是同一个status 这里的是http请求状态的一部分 而打印出来的那个status是数据的一部分
if(xhr.readyState === 4 && xhr.status === 200) {
//获取服务器相应的数据
console.log(xhr.responseText)
console.log(typeof xhr.responseText)
//将JSON字符串转换为对象
var result = JSON.parse(xhr.responseText)
console.log(result);
}
}
</script>
</html>
序列化与反序列化
把数据对象转换为字符串的过程,叫做序列化。例如,调用JSON.stringify()函数的操作,叫做JSON序列化。JSON.stringify()函数 序列化函数
把字符串转换为数据对象的过程,叫做反序列化。例如,调用JSON.parse()函数的操作,叫做JSON反序列化。SON.parse()函数 反序列化函数