认识前后端交互
在开发中 我们一定离不开前后端交互
其实就是前端向后端发送请求, 想要获取到某一个数据
目前 前后端交互的一个主流方式就是利用 ajax (主要是一个 axios 比较火)
- 利用 ajax 完成一个前后端交互
// 1. 创建一个 ajax
const xhr = new XMLHttpRequest()
// 2. 配置 ajax
// xhr.open('以什么方式请求, 目前开发中只有 post/get', '向谁发送请求', '第三个参数暂时欠着, 可以不写')
xhr.open('GET', 'http://localhost:8888/test/first')
// 3. 发送 ajax
xhr.send()
// 4. 监听 请求完成的时间
xhr.onload = function () {
// 4.1 请求完成的时候, 说明数据已经给到我们前端, 我们开始使用
console.log(xhr.responseText)
}
ajsx 的异步问题
其实就是配置 ajax 的第三个参数
这个参数默认是 true 表示当前的请求是 异步
- 异步: 1, 2, 3, 4
- 创建(同步)
- 配置(同步)
- 发送(异步)
- 监听(同步)
// 异步: 1 2 3 4
// 1. 创建一个 ajax
const xhr = new XMLHttpRequest()
// 2. 配置 ajax
xhr.open('GET', 'http://localhost:8888/test/first')
// 3. 发送 ajax
xhr.send()
// 4. 监听 ajax 完成
xhr.onload = function () {
console.log(xhr.responseText)
}
- 异步: 1, 2, 4, 3
- 创建(同步)
- 配置(同步)
- 监听(同步)
- 发送(异步)
// 异步: 1 2 4 3
// 1. 创建一个 ajax
const xhr = new XMLHttpRequest()
// 2. 配置 ajax
xhr.open('GET', 'http://localhost:8888/test/first')
// 4. 监听 ajax 完成
xhr.onload = function () {
console.log(xhr.responseText)
}
// 3. 发送 ajax
xhr.send()
- 同步: 1, 2, 4, 3
- 创建(同步)
- 配置(同步)
- 监听(同步)
- 发送(同步)
// 同步: 1 2 4 3
// 1. 创建一个 ajax
const xhr = new XMLHttpRequest()
// 2. 配置 ajax
xhr.open('GET', 'http://localhost:8888/test/first', false)
// 4. 监听 ajax 完成
xhr.onload = function () {
console.log(xhr.responseText)
}
// 3. 发送 ajax
xhr.send()
- 同步: 1, 2, 3, 4
- 创建(同步)
- 配置(同步)
- 发送(同步) 只有当前代码执行完毕 才会去执行下一步, 只有请求完毕后 才会向下继续执行
- 监听(同步) 只有请求完毕后才会加载当前代码, 但是当前代码加载完毕的时候, 请求早就结束了, 所以当前的监听函数不会执行了
// 同步: 1 2 3 4
// 1. 创建一个 ajax
const xhr = new XMLHttpRequest()
// 2. 配置 ajax
xhr.open('GET', 'http://localhost:8888/test/first', false)
// 3. 发送 ajax
xhr.send()
// 4. 监听 ajax 完成
xhr.onload = function () {
console.log(xhr.responseText)
}
ajax 的状态码
利用了一个数字表明 ajax 当前运行到哪一步了
- ajax 创建完毕
- ajax 配置完成
- ajax 发送完毕 (后端已经对请求作出响应, 并把请求返回给 浏览器)
- 浏览器开始解析后端返回的内容, 如果返回的数据比较少, 那么此时 就可以使用数据了, 但是有可能没有解析完毕, 数据不完整, 所以不推荐在这里使用数据
- 浏览器的解析的内容已经全部处理完毕, 我们可以开始使用数据了
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/test/first')
xhr.send()
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log('4 -----> 浏览器解析完毕解析', xhr.responseText)
}
}
xhr.onload = function () {
console.log('请求完毕 onload 加载: ', xhr.responText)
}
http 协议
当前协议规定 请求 只能是 前端发起的, 并且在传输过程中, 只能传递字符串
-
建立连接
- 浏览器和服务器 建立连接
-
发送请求
- 如果需要携带一些参数, 那么需要以请求报文的形式传递
- 报文游览器进行组装, 我们只需要传递一些对应的信息
-
接受相应
- 根据请求报文内的相关信息, 确定现在需要做什么事情, 并把必要的数据进行返回
- 返回的内容需要放在 相应报文中
-
关闭连接
- 浏览器和服务器的连接到此结束
综上所述, 我们的每一次请求都是完全独立的, 前一个请求和后一个请求没有任何联系
哪怕两次请求之间的间隔很短, 那么也没有任何的关联
重点:
- 请求状态码
- 100 ~ 199: 连接正在进行中(持续进行)
- 200 ~ 299: 表明连接成功
- 300 ~ 399: 表明重定向
- 400 ~ 499: 表示前端错误 (没权限/传参错误)
- 500 ~ 599: 表明后端错误
请求方式的差异
GET: 获取的含义
POST: 提交的含义
- 请求方式最就大的差异就是传参
- 传承的方式
- GET: 直接在地址后边拼接参数即可, 格式类似于以前的 查询字符串
- POST: 在请求体内书写(其实就是 xhr.send(这小括号内))
- 传承的大小
- GET: 2kb 左右
- POST: 原则上没有限制, 但是我们可以在后端添加限制
- 传承的安全性
- GET: 明文传输, 相对安全
- POST: 密文传输, 相对安全
- 传参的格式
- GET: 传递的是查询字符串格式
- POST: 原则上也没有限制, 但是传参的时候需要通过 content-type 指定我们传参的格式
- 传承的方式
测试请求
测试请求1
const xhr = new XMLHttpRequst()
xhr.open('GET', 'http://localhost:8888/test/first')
xhr.send()
xhr.onload = function () {
console.log(xhr.responseText)
}
测试请求2
const xhr = new XMLHttpRequest()
xhr.open('GET', 'hhttp://localhost:8888/test/second')
xhr.send()
xhr.onload = function () {
const res = JSON.parse(xhr.responseText)
if (res.code === 0) {
console.log('此时可能请求失败, 做一些什么事情...')
return
}
// 如果代码能够运行到这里, 说明请求成功, 我们可以做成功后的一些事情
console.log('此时请求完毕: ', res )
}
测试请求3
const xhr = new XMLHttpRequ()
// xhr.open('GET', 'http://localhost:8888/test/third?key=value&key2=value2')
// xhr.open('GET', 'http://localhost:8888/test/third?name=QF001&age=18')
// xhr.open('GET', 'http://localhost:8888/test/third?name=QF001')\
xhr.open('GET', 'http://localhost:8888/test/third?age=18')
xhr.send()
xhr.load = functionn() {
const res = JSON.parse(xhr.responseText)
if(res.code === 0) {
console.log('此时可能请求失败, 做一些什么事情...')
return
}
// 如果代码能够运行到这里, 说明请求成功, 我们可以做成功后的一些事情
console.log('此时请求完毕: ', res)
}
post 请求携带参数
post 的参数必须书写在 xhr.send() 的小括号中
并且 我们也可以传递 查询字符串
那么可以尝试自己书写一下, 看一下能否正确请求成功
// 1. 创建
const xhr = new XMLHttpRequest()
// 配置
xhr.open('POSTT', 'http://localhost:8888/test/fourth')
// 如果是 post 方式, 并且需要携带参数, 那么需要加一步 设置请求头
// xhr.setRequestHeader('content-type', 'application/josn') // 如果参数是 json 字符串, 需要这样写
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //如果参数是查询字符串 ,需要这样书写
// 发送
// xhr.send('key=value&key2=value')
xhr.send('name=张三&age=18')
// 监听请求完毕
xhr.onload = function () {
const res = JSON.parse(xhr.responseText)
console.log(res)
}
