HTTP 协议、Ajax、XHR、JSON、本地存储、跨域

前后端数据交互

Web 前端入门到精通，前后端数据交互与 HTTP 协议，本地存储（Cookie、localStorage、sessionStorage）Ajax、JSON、跨域（CORS、JSONP）XRH 对象，Axios 与 Fetch重难点

1、HTTP 相关基本概念

名称	描述
HTTP	超文本传输协议（HyperText Transfer Protocol），服务器和浏览器之间传输超文本（HTML、图片等内容）的传送协议
TCP	一种传输控制协议（了解即可）
IP	电脑的 IP 地址（了解即可）
DNS	域名解析系统（了解即可）

2、HTTP 常用方法

名称	描述
GET	HTTP 的一种请求方式，一般用于获取数据
POST	HTTP 的一种请求方式，一般用于创建数据

3、HTTP 状态码

服务器返回的，表示服务器对请求的处理结果

名称	描述
1xx	100~199 之间的数字，表示信息，此时请求已被接受，需要继续处理，（了解即可）
2xx	200~299 之间的数字，表示成功，常见的状态码是：200
3xx	300~399 之间的数字，表示重定向 常见的状态码如下： 301：永久重定向 302：临时重定向 304：资源没有被修改，使用缓存中的资源
4xx	400~499 之间的数字，表示请求错误 常见的状态码是：404，服务器无法根据客户端的请求找到资源
5xx	500~599 之间的数字，表示服务器端错误 常见的状态码是：500，服务器内部错误

4、本地存储

名称	描述
cookie	全称是 HTTP Cookie，简称 Cookie，是浏览器存储数据的一种方式 注意项： 1、浏览器发送请求时，会自动携带 cookie，将其发送到服务端 2、cookie 在浏览器关闭后就会被清除 3、cookie 有数量限制，最多只有 4kb 左右 4、当单个域名下的 cookie 超出限制后，再设置 cookie，浏览器就会清除以前设置的 cookie
localStorage	浏览器存储数据的一种方式 注意项： 1、不会随着浏览器每次请求发送到服务器 2、持久化本地存储，除非手动清除，否则数据是永远不会过期的 3、不同域名下不能共用 localStorage 4、键和值类型只能是字符串类型的
sessionStorage	浏览器存储数据的一种方式，（不常用，了解即可） 注意项如下: 1、不会随着浏览器每次请求发送到服务器 2、临时存储，当关闭浏览器时，sessionStorage 中的数据会清空

5、cookie 的属性

名称	描述
Name 和 Value	cookie 的名称（Name）和值（Value） 注意项： 1、cookie 存储时，必须设置对应的名称和值，示例：document.cookie="username=arry" 2、名称和值如果是非英文的，存储时需要使用 encodeURIComponent()编码，读取时使用 decodeURIComponent()解码 示例：document.cookie=username=${encodeURIComponent("张三")} 3、一般名称使用英文，不要用中文，值可以用中文，但是要编码
expires	设置 cookie 的失效时间，值是 Date 类型的
max-age	设置 cookie 的失效时间，值是数字，单位秒。 如果值为正数，表示多少秒之后失效。 如果值为 0 或者负数，表示删除该 cookie
domain	设置可以访问 cookie 的域名（不常用，了解即可）
path	设置 cookie 的路径，限定访问 Cookie 的范围（不常用，了解即可）
httpOnly	设置了 httpOnly 属性的 cookie 不能通过 js 访问（不常用，了解即可）
secure	安全标志，如果设置了这个属性，只在安全协议时，如：https，才会将 cookie 发送到服务端（不常用，了解即可）

6、编码与解码

名称	描述
encodeURIComponent()	对非英文字母（例如汉字）进行编码，可以避免乱码现象。应用场景如下： 1、cookie 存储时，值是非英文字母的要进行编码 2、发送 ajax 请求时，携带的非英文参数要进行编码
decodeURIComponent()	对 encodeURIComponent() 编码的内容进行解码

7、sessionStorage/localStorage 的常用方法和属性

名称	描述
setItem()	保存数据
getItem()	获取数据
removeItem()	删除指定数据
clear()	清除所有数据
length	返回存储数据的条数

8、Ajax 相关概念

名称	描述
Ajax	浏览器和服务器之间的一种通信方式，是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）简写 使用 Ajax 可以实现在无需重新加载整个网页的情况下，能够更新部分网页的数据
XML	可扩展标记语言，是前后端数据通信时传输数据的一种格式（不常用，了解即可）
JSON	前后端交互时，常用的一种数据格式，JavaScript Object Notation（JavaScript 对象表示法）的缩写

9、本地服务器

名称	描述
Live Server	vscode 的一款插件，用来搭建本地服务器环境
phpStudy	Windows 电脑上一款搭建本地服务器的软件
Mamp	Mac 电脑上一款搭建本地服务器的软件

10、Ajax 基本的使用

名称	描述
XMLHttpRequest	是一个构造函数，用于实现浏览器与服务器之间的异步通信
open()	设置请求的类型、URL 以及是否异步处理请求
send()	发送请求
onreadystatechange	当 readyState 改变时，就会触发 onreadystatechange 事件
readyState	表示 XMLHttpRequest 的状态，一共有 5 个状态 0：未初始化，尚未调用 open() 1：启动，已经调用 open()，但尚未调用 send() 2：发送，已经调用 send()，但是尚未接收到响应 3：接收，已经接收到部分响应数据 4：完成，已经接收到全部响应的数据，而且已经可以在浏览器中使用了
status	表示 HTTP 状态码，在 200~299 区间或者等于 304 时，都表示成功响应，数据可以正常使用了
statusText	表示 HTTP 状态码说明（不常用，了解即可）
responseText	获得字符串类型的响应数据

11、XHR 的属性

名称	描述
responseType	设置响应数据的类型
reponse	获得任意类型的响应数据
timeout	设置请求超时时间，单位是 ms
withCredentials	指定使用 ajax 发送请求时，是否携带 cookie（不常用，了解即可）

12、XHR 的方法

名称	描述
abort()	终止当前的请求
setRequestHeader()	设置请求头信息，其中 Content-type 字段用来告诉服务器，浏览器发送的数据是什么格式的，常见的设置有两种，如下： 1、xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded ')设置发送的数据是表单默认的提交数据的格式 2、xhr.setRequestHeader('Content-type','application/json')设置发送的数据是 JSON 格式的

13、XHR 的事件

名称	描述
onload	响应数据可用时触发该事件
onerror	请求发生错误时触发该事件
onabort	调用 abort()方法终止请求时触发该事件
ontimeout	请求超时时触发该事件

14、JSON 的常用方法

名称	描述
JSON.parse()	将 JSON 格式的字符串转成 JavaScript 对象
JSON.stringify()	将 JavaScript 对象转成字符串

15、跨域解决方案

名称	描述
CORS	跨域资源共享，需要后端配合设置 Access-Control-Allow-Origin 字段，允许指定的域名跨域请求数据 （了解即可）
JSONP	利用浏览器不限制 script 标签跨域的特性，通过 script 标签的 src 属性加载跨域文件

16、Ajax 扩展内容

名称	描述
FormData	可用于发送表单数据
axios	第三方封装好的 Ajax 库，是基于 Promise 的，可以用在浏览器和 node.js 中
fetch	基于 Promise 的一种前后端通信的方式，是 ajax 的一种替代方案

17、async/await

名称	描述
async	用于声明异步函数，返回值为一个 Promise 对象，它以类似 同步 的方式来写异步方法，语法与声明函数类似
await	顾名思义， await就是异步等待，它等待的是一个 Promise