前后端交互
前后端交互
+ 客户端 和 服务端 进行通信
+ 目的: 如何向服务器发送一段信息, 得到服务器反馈回来的结果
=> 例如: 登录, 发送 用户名 和 密码, 接受返回 登录成功 或者 登录失败
=> 例子: 列表, 发送 第几页 和 一页多少条, 接受返回 商品数组
前端如何和后端交互(通讯)
+ 技术栈: ajax
=> async 异步
=> javascript
=> and 和
=> xml 严格的 html 格式数据
1. 创建 ajax 对象(专门用于发送 ajax 请求的 “工具”)
=> 语法: const xhr = new XMLHttpRequest()
2. 配置本次的请求信息
=> 语法: xhr.open(请求方式, 请求地址, 是否异步)
-> 请求方式: 按照接口文档书写
-> 请求地址: 按照接口文档书写
-> 是否异步: 默认是 true 表示 是异步, 选填 false, 表示 非异步(同步)
3. 把请求发送出去
=> 语法: xhr.send()
4. 接受响应
=> 依赖事件触发的, 因为 ajax 是异步的
=> 语法: xhr.onload = function () {}
=> 时机: 当前这个 ajax 请求结束以后, 触发
=> 在 xhr 对象内, 有一个叫做 reponseText 的属性, 记录的就是后端返回的信息
http 通讯协议(了解)
+ 约定了前后端交互的一种方式
+ 这个协议只能 前端主动发起请求, 接受后端响应
1.基于 TCP/IP 协议的三次握手
+ 目的是为了建立 客户端 和 服务端 的连接, 确保道路畅通
- 前端主动发送请求
+ 把你想和后端说的事情说出来(一次只能说一个事情)
+ 前端以请求报文的形式发送所有的内容
2-1. 请求报文行
=> 传输协议版本 http/1.1
=> 请求方式 get
=> 请求地址 /xxxx/yyyy
2-2. 请求报文头(对本次请求的描述信息)
=> userAgent 客户端信息
=> platform 客户端操作系统
=> host 客户端主机域名
=> cookie 当你的 cookie 空间内有信息, 会自动携带
=> content-type 前端请求体的数据格式
=> …
2-3. 请求报文空行
=> 一个空白行
=> 区分请求头和请求体的空白行
2-4. 请求报文体
=> 前端传递给后端的真实信息
=> post 会有
=> get 一般没有, 都连接在地址一起了
- 后端返回响应给前端
+ 后端准备好给前端的信息
+ 后端以响应报文的形式发送所有的内容
3-1. 响应状态行
=> 传输协议版本
=> 响应状态码 200
=> 简单描述 OK
3-2. 响应报文头(对本次响应的描述信息)
=> Server 服务器版本
=> Date 服务器时间
=> content-type 服务端响应体的数据格式
=> content-length 响应体长度
=> …
3-3. 响应报文体
=> 后端返回给前端的真实信息
- 基于 TCP/IP 协议的四次挥手
=> 为了确保正确且安全的断开
三次握手
1. 前端发送一个 “包” 给到后端
2. 后端接收到前端的 “包” 以后, 返回一个 “包+包” 给到前端
后端知道 前端可以正常发送
后端知道 后端可以正常接受
3. 前端接收到后端的 “包+包” 以后, 返回一个 “包+包+包” 给到后端
前端知道 前端可以正常发送
前端知道 前端可以正常接受
前端知道 后端可以正常接受
前端知道 后端可以正常发送
后端知道 前端可以正常接受
后端知道 后端可以正常发送
四次挥手
1. 前端发送一个 “包” 给到后端
=> 告诉他: “我接受到你的响应了, 可以准备断开了”
2. 后端接受到前端的 “包”, 返回一个 “包+包1” 给回到前端
=> 告诉前端: “我知道你接收到我的信息了, 我准备断开了”
3. 后端再次返回一个 “包+包2” 给到前端
=> 告诉前端: “我已经准备好断开了, 当我再次受到消息会直接断开, 不在回复”
4. 前端接收到所有 “包” 以后, 返回一个 “最终包” 给到后端
=> 高度后端: “我已经断开连接了, 别回了”
响应状态码(了解)
+ 以一个数字的形式表示本次请求的状态(成功/失败)
分成五类
1. 100 ~ 199 表示连接继续
2. 200 ~ 299 表示各种成功
3. 300 ~ 399 表示重定向
304 缓存
301 临时重定向
302 永久重定向
4. 400 ~ 499 表示各种客户端错误
404 请求地址不存在
403 请求地址权限不够
5. 500 ~ 599 表示各种服务端错误
请求方式
+ 前后端传递信息的方式
+ 本质区别就是 语义化 的不一样
-
GET 偏向于获取的语义
-
POST 偏向于提交的语义
-
PUT 偏向于提交的语义(偏向于提交插入)
-
DELETE 偏向于获取的语义(偏向于删除)
-
PATCH 偏向于提交的语义(偏向于提交修改)
-
HEAD 偏向于获取的语义(就是为了获取响应头信息)
-
OPTIONS 偏向于获取的语义(获取服务器信息, 需要服务器允许)
-
CFONNECT 保留请求, 管道连接改为代理连接使用
-
…
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 相对安全
2147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
