前后端交互

客户端和服务端进行通信
目的：如何向服务器发送一段信息，得到服务器反馈回来的结果

前端如何和后端交互(通讯)

前端如何和后端交互(通讯)
=>技术栈：ajax
async 异步
JavaScript
and 和
xml 严格的 html 格式数据
1、创建 ajax 对象 (专门用于发送ajax请求的’工具’)
语法：const xhr = new XMLHttpReques（）
2、配置本次的请求信息
语法：xhr.open(请求方式，请求地址，是否异步)
->请求方式：按照接口文档书写
->请求地址：按照接口文档书写
->是否异步：默认是 true 表示异步，选填false 表示非异步(同步)
3、把请求发送出去
语法：xhr.send()
4、接受响应
依赖事件触发的，因为ajax是异步的
语法：xhr.onload = function(){}
时机：当前这个ajax 请求结束以后，触发
在xhr对象内，有一个叫做reponseText的属性，记录的就是后端返回的信息

http 通讯协议

约定了前后地交互的一种方式
这个协议只能前端主动发起请求，接受后端响应

1、基于 TCP / IP 协议的三次握手
目的是为了建立客户端和服务端的连接，确保道路畅通

2、前端主动发送请求
把想和后端说的事情说出来(一次只能说一件事情)
前端以请求报文的形式发送所有的内容
2.1、请求报文行
=>传输协议版本 http/1.1
=>请求方式 get
=>请求地址 /xxxx/yyyy
2.2、请求报文头(对本次请求的描述信息)
userAgent 客户端信息
platform 客户端操作系统
host 客户端主机域名
cookie 当你的cookie空间内有信息，会自动携带
content-type 前端请求体的数据格式
…
2.3、请求报文空行
一个空白行
区分请求头和请求体的空白行
2.4、请求报文体
前端传递给后端的真实信息
post 会有
get 一般没有，都连接在地址一起了

3、后端返回响应给前端
后端准备好给前端的信息
后端以响应报文的形式发送所有的内容
3.1、响应状态行
传输协议版本
响应状态码 200
简单描述 OK
3.2、响应报文头(对本次响应的描述信息)
Server 服务器版本
Data 服务器时间
content-type 服务器响应体的数据格式
content-length 响应体长度
…
3.3、响应报文体
后端返回给前端的真实信息

4、基于 TCP / IP 协议的四次挥手
为了确保正确且安全的断开

三次握手

四次挥手

响应状态码

以一个数字的形式表示本次请求的状态(成功 / 失败)
分成五类
1、100～199 表示连接继续
2、200～299 表示各种成功
3、300～399 表示重定向
304 缓存
301 临时重定向
302 永久重定向
4、400～499 表示各种客户端错误
404 请求地址不存在
403 请求地址权限不够
5、500～599 表示各种服务端错误

请求方式

前后端传递信息的方式
本质区别就是语义化的不一样
1、GET 偏向于获取的语义
2、POST 偏向于提交的语义
3、PUT 偏向于提交的语义(偏向于提交插入)
4、DELETE 偏向于获取的语义(偏向于删除)
5、PATCH 偏向于提交的语义(偏向于提交修改)
6、HEAD 偏向于获取的语义(就是为了获取响应头信息)
7、OPTIONS 偏向于获取的语义(获取服务器信息，需要服务器允许)
8、CFONNECT 保留请求，管道连接改为代理连接使用
9、…

GET 和 POST 的区别

1、携带信息的位置
GET：直接拼接在地址栏后面(以查询字符串的方式)
POST：书写在请求体内

2、携带信息的格式
GET：只能是查询字符串格式
POST：不限制任何格式，但是你要在请求头内的 content-type 信息说明
->查询字符串：application / x-www-form-urlencoded
->json字符串：application / json
->二进制流：mutlipart / form-data

3、携带信息的大小
GET：2KB
POST：理论上不限制大小，会被服务器限制

4、安全
GET 相对不安全
POST 相对安全