Ajax工作原理

HTTP协议原理与ajax工作原理

1.什么HTTP协议
- 协议指的是规定浏览器跟服务器交互的数据格式
2.浏览器请求必须是：请求报文
3.服务器响应必须是：响应报文
4.请求报文与响应报文的数据格式如下
- a.请求报文
  - (1)请求行：包含请求方法, URL, 协议版本
  - (2)请求头：包含请求的附加信息, 由关键字/值对组成
  - (3)请求体：浏览器发送给服务器的数据(参数)
- b.响应报文
  - (1)响应行：包含协议版本, 状态码, 状态码描述
    - 1xx, 指示信息, 表示请求已接收, 继续处理
    - 2xx, 成功, 表示请求已被成功接收和处理.
    - 3xx, 重定向, 表示要完成请求必须进行更进一步操作
    - 4xx, 客户端错误, 表示有语法错误或请求无法实现
    - 5xx, 服务器端错误, 表示服务器未能实现合法的请求
  - (2)响应头:content-type 返回的数据格式，jQuery自动转JSON就是根据他来判断的
  - (3)响应体：服务器响应给浏览器的数据（xhr.responseText）

    <script>
      /* 
        1.HTTP : 网络传输协议
            * 协议 ： 约定 数据传输格式
        2.HTTP协议组成部分
            2.1 请求报文
            2.2 响应报文
        3. 请求报文三个组成部分
            3.1 请求行 ： 包含请求方法, URL, 协议版本
            3.2 请求头 ： 浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中）
            3.3 请求体 ： post请求参数在请求体中
        4. 响应报文三个组成部分
            4.1 响应行 ： 包含协议版本, 状态码, 状态码描述
                2开头 ： 请求成功  200
                3开头 ： 重定向  302  
                4开头 ： 前端问题  400参数错误   401 没有权限  404 url错误
                5开头 ： 后台问题  500 服务器bug,可以理解为后台java代码爆红
            4.2 响应头 ： 浏览器告诉服务器，我给你的数据是什么格式 （浏览器会自动识别）
            4.3 响应体 ： 后台响应的数据，一般是json格式
        5.ajax原理： 设置http请求报文的过程
         */

      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      xhr.open("post", "http://www.liulongbin.top:3009/api/login")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin&password=123456")
      //(5).注册回调函数
      // xhr.onload = function() {};
      xhr.onreadystatechange = function() {
        //onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
    </script>

一个页面从输入url到呈现过程

1.DNS域名解析：将url中的域名解析成ip地址
2.TCP三次握手：建立安全的网络传输协议
- 2.1 什么是TCP : 一种传输控制协议
- 2.2 TCP作用 : 保证HTTP网络传输是安全 + 可靠的（检测客户端与服务器的网卡是不是通的）
- 2.3 TCP三次握手 :
  
  第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)
  
  第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。检测浏服务器: 接收 + 发送)
  
  第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
3.HTTP建立连接
- 3.1 客户端发送请求
- 3.2 服务器处理请求
- 3.3 服务器响应请求
4.渲染引擎开始渲染响应返回的HTML文本
- 4.1 解析html生成：dom树
- 4.2 解析css生成：样式树
- 4.3 dom树与样式树合并得到渲染树
- 4.4 呈现页面

axios拦截器使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
  </head>

  <body>
    <!-- 按钮 -->
    <button class="btn btn-primary" id="btn1">请求1</button>
    <button class="btn btn-info" id="btn2">请求2</button>
    <button class="btn btn-warning" id="btn3">请求3</button>

    <!-- loading 区域 -->
    <div class="loading-box">
      <div class="spinner-border m-5 text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>

    <script src="./lib/axios.js"></script>

    <script>
      /* axios拦截器工作流程
     1. axios 发起请求
     2. 执行 请求拦截器 : 添加ajax发送请求之前的操作
     3. 服务器 接收、处理、响应 请求
     4. 执行 响应拦截器 ： 添加服务器响应之后的操作
     4. axios 接收响应(执行then方法)
     */

      // 添加请求拦截器
      axios.interceptors.request.use(
        function(config) {
          // 可以操作这次请求了
          // console.log(config); // ajax请求参数;
          // 展示 loading 效果
          document.querySelector(".loading-box").style.display = "block"
          // 返回固定数据
          return config
        },
        function(error) {
          // 对请求错误做些什么 , 下面这句话，固定语法;
          return Promise.reject(error)
        }
      )

      // 添加响应拦截器
      axios.interceptors.response.use(
        function(response) {
          //服务器响应的数据
          // console.log(response);
          // 隐藏 loading 效果
          document.querySelector(".loading-box").style.display = "none"
          // 把服务器响应的数据返回给axios的then方法
          return response
        },
        function(error) {
          // 隐藏 loading 效果
          $(".loading-box").hide() // 失败了，也要隐藏 loadding 效果;
          // 对响应错误做点什么
          return Promise.reject(error)
        }
      )

      //按钮1
      document.querySelector("#btn1").onclick = function() {
        axios({
          url: "http://www.liulongbin.top:3009/api/news",
          method: "get"
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }

      //按钮2
      document.querySelector("#btn2").onclick = function() {
        axios({
          url: "https://autumnfish.cn/fruitApi/fruits",
          method: "get"
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }
      //按钮3
      document.querySelector("#btn3").onclick = function() {
        axios({
          url: "http://www.liulongbin.top:3009/api/login",
          method: "post",
          data:{ username:'admin',password:'123456'}
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }
    </script>
  </body>
</html>

axios基地址

      设置axios基地址 : 所有的请求 默认添加前面的 http://域名
      axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

ajax知识补充

onreadstatechange事件

    <script>
        XMLHttpRequest的两个事件

        1. onload事件 ：  接收服务器响应的数（一次请求，只会执行一次）
        2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）
                XMLHttpRequest对象的状态码 （xhr.readyState）
                1: 请求未建立  (创建了xhr对象，但是还没调用open)
                2: 服务器连接已建立 
                3. 请求已接收  (send之后,服务器已经接收了请求)
                4. 请求处理中 
                5. 请求已完成，且响应已就绪 （ 4状态码等同于onload事件 ）

      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      console.log(xhr.readyState)
      //(2).设置请求方法和地址
      xhr.open("post", "http://www.liulongbin.top:3009/api/login")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      console.log(xhr.readyState)
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin&password=123456")
      //(5).注册回调函数
      //a. onload 是新式浏览器才支持的
      //b. 如果要兼容更早的浏览器，可以使用 onreadystatechange
      //c. onreadystatechange触发时机 ： xhr.readState状态变化
      // xhr.onload = function() {};

      xhr.onreadystatechange = function() {
        console.log(xhr.readyState)
        //onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
    </script>

Ajax组成部分了解

Ajax：全称 Asynchronous Javascript And XML(异步的js与xml)
- 大白话：用js发送异步的网络请求
- A : Asynchronous 异步
  - 同步：指的是代码按照从上往下顺序执行
  - 异步：代码不会立即执行,而是要等一会儿执行
    - 目前我们学过的ECMAScript只有两个语法是异步的：定时器与 ajax
    - DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候，主要以js为主，DOM一般不讨论。
- J：Javascript
- A ：And
- X : XML 与 XMLHttpRequest
  - XML ：解决跨平台数据传输。
    - 在JSON没有出来以前, 网络传输主要以XML格式数据为主。后来JSON问世，逐渐取代XML。但是由于ajax技术出来的比json早，因此xml这个称呼一直保留至今

get请求与post请求区别

1.传参方式不同
- get在url后面拼接(请求行)
- post在请求体传参
2.大小限制不同
- get有大小限制，不同浏览器大小限制不同。一般2-5 KB
- post没有大小限制
3.安全性不同
- get参数直接暴露在url，不安全(一般查询类数据都是get)
- post参数在请求体中，更加安全（一般登录注册必须是post）
4.传输速度不同
- get传输速度快
- post传输速度慢

其他请求方法了解

实际开发中，前端无权决定请求方法，只需要根据后台接口文档来就可以了
- put和pacth区别
  - 全局更新 : put
  - 局部更新: patch

请求方式	描述	特点
post	一般用于新增数据(提交数据)	请求体传参
get	一般用于查询数据(查询数据)	请求行(url)传参
delete	一般用于删除数据	请求体传参
put	一般用于更新全部数据	请求体传参
patch	一般用于更新局部数据	请求体传参

Ajax工作原理和axios知识补充

Ajax工作原理

HTTP协议原理与ajax工作原理

一个页面从输入url到呈现过程

axios拦截器使用

axios基地址

ajax知识补充

onreadstatechange事件

Ajax组成部分了解

get请求与post请求区别

其他请求方法了解