前后端交互

1.认识前后交互

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

        + 技术栈: 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 的属性, 记录的就是后端返回的信息

例子：

 const xhr = new XMLHttpRequest()
// 2. 配置本次请求的信息
    xhr.open('GET', 'http://localhost:8888/test/second')
    // 3. 把请求发送出去
    xhr.send()
    // 4. 接受响应
    xhr.onload = function () {
      // 4-2. 打印后端返回的结果，转化成字符串格式
      console.log(JSON.parse(xhr.responseText))
    }

2.http协议

2.1     http 通讯协议(了解)

        + 约定了前后端交互的一种方式

        + 这个协议只能 前端主动发起请求, 接受后端响应

2.2

 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. 响应状态行

            => 传输协议版本   http/1.1

            => 响应状态码    200

            => 简单描述      OK

          3-2. 响应报文头(对本次响应的描述信息)

            => Server   服务器版本

            => Date     服务器时间

            => content-type    服务端响应体的数据格式

            => content-length  响应体长度

            => ...

          3-3. 响应报文体

            => 后端返回给前端的真实信息

      4. 基于 TCP/IP 协议的四次挥手

        => 为了确保正确且安全的断开

2.3.三次握手，四次挥手

三次握手

        1. 前端发送一个 "包" 给到后端

        2. 后端接收到前端的 "包" 以后, 返回一个 "包+包" 给到前端

          后端知道  前端可以正常发送

          后端知道  后端可以正常接受

        3. 前端接收到后端的 "包+包" 以后, 返回一个 "包+包+包" 给到后端

          前端知道  前端可以正常发送

          前端知道  前端可以正常接受

          前端知道  后端可以正常接受

          前端知道  后端可以正常发送

          后端知道  前端可以正常接受

          后端知道  后端可以正常发送

      四次挥手

        1. 前端发送一个 "包" 给到后端

          => 告诉他: "我接受到你的响应了, 可以准备断开了"

        2. 后端接受到前端的 "包", 返回一个 "包+包1" 给回到前端

          => 告诉前端: "我知道你接收到我的信息了, 我准备断开了"

        3. 后端再次返回一个 "包+包2" 给到前端

          => 告诉前端: "我已经准备好断开了, 当我再次受到消息会直接断开, 不在回复"

        4. 前端接收到所有 "包" 以后, 返回一个 "最终包" 给到后端

          => 高度后端: "我已经断开连接了, 别回了"

3.相应状态码

        1. 100 ~ 199    表示连接继续

        2. 200 ~ 299    表示各种成功

        3. 300 ~ 399    表示重定向

                           304    缓存

                           301    临时重定向       （百度的统计点击数量）

                           302    永久重定向           （京东的360.buy 地址打开永远是京东官网）

        4. 400 ~ 499    表示各种客户端错误

          404    请求地址不存在

          403    请求地址权限不够

        5. 500 ~ 599    表示各种服务端错误

4.请求方式（get/post）

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 相对不安全

        5.其他类型（了解）

 1. GET      偏向于获取的语义

      2. POST     偏向于提交的语义

      3. PUT      偏向于提交的语义(偏向于提交插入)

      4. DELETE   偏向于获取的语义(偏向于删除)

      5. PATCH    偏向于提交的语义(偏向于提交修改)

      6. HEAD     偏向于获取的语义(就是为了获取响应头信息)

      7. OPTIONS  偏向于获取的语义(获取服务器信息, 需要服务器允许)

      8. CFONNECT 保留请求, 管道连接改为代理连接使用

      9. ...