前后端交互
Ajax其实就是一个前后端的通讯,是我们在开发中,必不可少的一个技能;流程为 在前端开发中, 在某一个时刻(页面首次打开渲染的时候, 或者点击下一页需要新的数据的时候),此时通过 ajax 向后端(服务端)发送一个请求, 拿到 所谓的数据,发送请求需要传一些参数(就是告诉后端你要什么东西).
实现一个Ajax 请求
// 1. 创建一个 ajax 对象
const xhr = new XMLHttpRequest()
// 2. 配置 ajax 对象
// xhr.open('请求的方式(不区分大小写)', '请求的地址', '一个布尔值')
xhr.open('GET', 'http://localhost:8888/test/first', true)
// 3. 发送请求
xhr.send()
// 4. 接收响应
xhr.onload = function () {
// console.log('现在后端已经给我们返回了 我们想要的数据了')
console.log(xhr.responseText) // 哇塞, 你已经成功使用 ajax 发送给我了一个请求, 这是我给你的回应, 我是一个字符串类型 ^_^ !
}
ajax 的异步问题
ajax 是否异步为 第二步配置Ajax对象的第三个参数决定的, 也就是那个布尔值;默认为 true 代表的是开启异步(异步的运行流程为:1,2,3,4,5), 如果传递的是 false 代表关闭异步开启同步(同步的运行流程为:1,2,3,4或者1,2,4,3).
// 1. 创建一个 ajax 对象
const xhr = new XMLHttpRequest()
// 2. 配置 ajax 对象
xhr.open('GET', 'http://localhost:8888/test/first', false)
// 4. 接收响应
xhr.onload = function () {
// console.log('现在后端已经给我们返回了 我们想要的数据了')
console.log(xhr.responseText) // 哇塞, 你已经成功使用 ajax 发送给我了一个请求, 这是我给你的回应, 我是一个字符串类型 ^_^ !
}
// 3. 发送请求
xhr.send()
http 传输协议(了解)
还有一个协议 https, 相对于 http 安全一点点
- 根据传输协议规定, 必须是由前端向后端发送请求, 发送请求的时候如果要携带一些参数, 必须是字符串格式
-
- 建立连接
- 浏览器和服务端 建立一个连接
-
- 发送请求
- 要求前端必须以 '请求报文' 的形式发送;
- 请求报文 由 浏览器进行组装, 我们只需要提供对应的信息即可;
- 比如说: 请求的方式, 请求的地址, 请求需要的参数
-
- 接受响应
- 要求后端必须以 '响应报文' 的形式返回;
- 响应报文内有一个东西叫做响应状态码;
-
- 断开连接
- 浏览器和服务端的连接断开
- 响应状态码
- 100~199 表明连接还在继续
- 200~299 表明连接各种成功 但现在只会返回一个 200
- 300~399 表明请求重定向
- 400~499 表明请求失败 但现在只会看到一些 403 404 401 400 一般4开头是前端的问题
- 500~599 表明服务端出错 跟前端无关, 是后端的问题
ajax 的状态码
通过一个数字, 表明 ajax 当前运行到那一步了
- 0: ajax 创建成功
- 1: 当前 ajax 配置成功
- 2: 当前 ajax 发送成功
- 3: 当前 浏览器 正在解析服务端返回给我们的内容
- 如果返回的内容少这一步基本能接受完
- 如果返回的内容很多这一步是接受的不完整的
- 4: 表明 浏览器 已经把服务端返回的内容 全都解析完毕了~
请求方式的区别
- get 偏向于获取的语义 (商品列表数据,用户详情,商品详情)
- eLete 偏向于获取的语义 (删除某一个内容)
- post 偏向于修改的语义 (修改用户名,修改密码)
- put 偏向于修改的语义 (修改库存,修改收藏数量)
