* 认识前后端交互
*
* 在开发中 我们一定离不开前后端交互
* 其实就是前端像后端发送请求, 想要获取到某一个数据
*
* 目前 前后端交互的一个主流方式就是利用 ajax (主要是一个 axios 比较火)
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/test/first')
xhr.send()
xhr.onload = function () {
console.log(xhr.responseText)
}
* ajax 的异步问题
*
* 其实就是 配置 ajax 的第三个参数
*
* 这个参数默认是 true 表示当前的请求是 异步
*
*
* 异步: 1 2 3 4
* 1. 创建 (同步)
* 2. 配置 (同步)
* 3. 发送 (异步)
* 4. 监听 (同步)
*
* 异步: 1 2 4 3 true
* 1. 创建 (同步)
* 2. 配置 (同步)
* 4. 监听 (同步)
* 3. 发送 (异步)
*
* 同步: 1 2 4 3
* 1. 创建 (同步)
* 2. 配置 (同步)
* 4. 监听 (同步)
* 3. 发送 (同步)
*
* 同步: 1 2 3 4 false
* 1. 创建 (同步)
* 2. 配置 (同步)
* 3. 发送 (同步) 只有当前代码执行完毕 才会去执行下一步, 只有请求完毕后 才会向下继续执行
* 4. 监听 (同步) 只有请求完毕后才会加载当前代码, 但是当前代码加载完毕的时候, 请求早就结束了, 所以当前的监听函数不会再执行了
*
*
*
* 同步和异步都可以按照 1 2 4 3 的顺序正常执行, 所以有人推荐按照 1 2 4 3 的顺序书写
* 但实际开发中一定是使用异步的方式, 所以我们按照 1 2 3 4 或者 按照 1 2 4 3 的顺序书写都可以
*/
/**
* ajax 的状态码
*
* 利用了一个数字表明 ajax 当前运行到那一步了
*
* 0: ajax 创建完毕
* 1: ajax 配置完毕
* 2: ajax 发送完毕 (后端已经对请求做出响应, 并把请求返回给 浏览器)
* 3: 浏览器开始解析后端返回的内容, 如果返回的数据比较少, 那么此时就可以使用数据了, 但是有可能没有解析完毕, 数据不完整, 所以不推荐在这里使用数据
* 4: 浏览器的解析的内容已经全部处理完毕, 我们可以开始使用数据了
*/
* http 协议
*
* 当前协议规定 请求 只能是 前端发起的, 并且在传输过程中, 只能传递字符串
*
* 1. 建立连接
* 浏览器和服务器建立连接
*
* 2. 发送请求
* 如果需要携带一些参数, 那么需要以请求报文的形式传递
* 报文由浏览器进行组装, 我们只需要传递一些对应的信息
*
* 3. 接收响应
* 根据请求报文内的相关信息, 确定现在需要做什么事情, 并把必要的数据进行返回
* 返回的内容需要放在 响应报文中
*
* 4. 关闭连接
* 浏览器和服务器的连接到此结束
*
*
* 综上所述, 我们的每一个请求都是完全独立的, 前一个请求和后一个请求没有任何关联
* 哪怕两次请求之间的间隔很短, 那也没有任何关联
*
*
*
* 重点:
* 请求状态码 与 ajax 的状态码 不一样
*
* 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 指定我们传参的格式
*/
* post 的参数一定书写在 xhr.send() 的小括号中
*
* 并且 我们也可以传递 查询字符串
*
* 那么可以尝试自己书写一下, 看一下能否正确请求成功
*/
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:8888/test/fourth')
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name=张三&age=18')
xhr.onload = function () {
const res = JSON.parse(xhr.responseText)
console.log(res)
}
需要在请求头中设置 authorization 字段才能正常发送请求, 对应的值是登陆成功后的 token
*
* 首页需要在页面的右上角渲染 用户的 用户名
*
* 所以现在需要发送一个请求给后端, 获取用户的详情
*
* 目前遇到两个问题
* 1. 需要证明我刚刚登陆过
* 因为 请求中 每一个请求, 不管间隔时间多少, 每个请求一定是完全独立的, 他们之间没有任何关联
* 但是我们在很多场景下都需要一些证明(登陆凭证), 所以后端帮助我们解决了这个问题
*
* 每次登录成功的时候, 后端会返回一个 '登录凭证/通关令牌', 然后前端 存储到本地
* 将来每一次需要证明自己之前登陆过的时候, 前端只需要将 '登录凭证/通关令牌' 传递给后端即可
*
* 后端会验证我们的 '登录凭证/通关令牌' 是否为伪造的, 是否过期, 如果都没有问题, 那么后端会返回给我们相应的数据
*
* 这个 '登录凭证/通关令牌' 其实就是后端返回给我们 token 字段
*
* 2. 需要将 用户 ID 传递给后端
* 用户 ID 其实 登录的时候就有, 我们可以在 登录完成的时候先将数据存储到本地
* 然后再当前页面 获取到 用户 ID, 将来在请求的时候传递给后端
*/
文件目录结构调整
* any: 整个项目的文件夹
* config: 整个项目相关的一些配置项
* 内部可能会有 常用的字符串
* 内部可能会有 常用的正则
* views: 整个项目的所有静态页面全都存放在这里
* index.html 首页
* login.html 登录页
* list.html 商品列表页
* detail.html 商品详情页
* ......
* css: 存放静态结构对应的样式
* index.css 首页
* login.css 登录页
* list.css 商品列表页
* detail.css 商品详情页
* ......
* js: 存放静态结构对应的逻辑
* index.js 首页
* login.js 登录页
* list.js 商品列表页
* detail.js 商品详情页
* ......
* utils: 存放整个项目的工具代码/公共代码
* 请求相关的代码
* 正则的校验代码
* 深拷贝的代码
* 扁平化的代码
* ......
