四、XMLHttpRequest 和 跨域
（一）XMLHttpRequest
1、含义：是浏览器内置的一个构造函数
2、作用：基于new出来的XMLHttpRequest实例对象，可以发起Ajax的请求。
3、主要的4个实现步骤
1）创建xhr对象
2）调用xhr.open( )函数
3）调用xhr.send( )函数
4）监听load 事件
4、请求时携带URL参数 或提交请求体
1）URL参数，只能拼接在URL地址后面
请求体，放到send( ) 里面
5、提交请求体数据，需指定Content-Type头
当需要提交请求体数据时，需要在xhr.open( )之后，调用xhr.setRequestHeader() 函数，指定请求体的编码格式
6、请求体格式 和 对应的Content-Type值
| 请求体格式 | Content-Type | 是否需要在代码中指定 |
|---|---|---|
| 参数=值&参数=值 | application/x-www-form-urlencoded | 是 |
| '{ "id": 1, "name": "zs" }' | application/json | 是 |
| new FormData() | multipart/form-data; xxxxxxxxx随机字符 | 否，浏览器自动设置 |
使用axios就不用关心这个请求头了，因为axios已经帮我们处理好了加请求头这件事，不过写原生代码，就需要自己指定了
（二）数据交换格式
1、什么是数据交换格式：数据交换格式，就是服务器端与客户端之间的数据传输的格式
2、两种数据交换格式：
1）XML(很少用）
2）JSON(主流）
3、什么是JSON
JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类 型的数据。例如：
4、JSON数据
1）用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据。
2）JSON数据的格式有两种：
① 对象格式 ② 数组格式
5）JSON的语法要求
使用 JSON 定义 JSON 格式的数据时，要遵守以下的 6 条规则：
① 属性名必须使用双引号包裹 ② 字符串类型的值必须使用双引号包裹 ③ JSON 中不允许使用单引号表示字符串 ④ JSON 中不能写注释 ⑤ JSON 的最外层必须是对象或数组格式（其他类型也可以，但多数是对象或数组格式） ⑥ 不能使用 undefined 或函数作为 JSON 的值
6）对象格式的JSON数据
对象格式的 JSON 数据，最外层使用 { } 进行包裹，内部的数据为 "key": "value" 的键值对结构。其中：
① key 必须使用英文的双引号进行包裹 ② value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）
7）数组格式的JSON数据
数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 分隔。其中： 每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。
8）把JSON数据转换为JS数据
调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据，例如：
9）把 JS 数据 转换 为 JSON 数据
调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串，例如：
10）序列化和反序列化
①把真实数据转换为字符串的过程，叫做序列化
②把字符串转换为真实数据的过程，叫做反序列化
11）把 XMLHttpRequest 请求到的 JSON 数据 反序列化 为 JS 对象
在 xhr 对象的 load 事件中，通过 xhr.response 访问到的是 JSON 格式的字符串数据。可以调用 JSON.parse() 函 数将 xhr.response 转化为 JS 对象。示例代码如下：
12）补充 — JSON文件
后缀名是 .json 的文件叫做JSON文件，专门用来存储JSON格式的数据，例如：
⭐注意： ①.json 结尾的文件，一般都是项目的配置文件
