[JavaScript知识库]关于axios，原生ajax，jQuery中的ajax

一、他们三的关系

????????axios是通过promise技术实现对ajax实现的一种封装，本身上来说axios就是ajax，但是ajax却不单单只是axios；jQuery也实现了对ajax技术的封装，但是jQuery主要是对原生JavaScript进行封装，封装了js三大核心要素：ECMAScript、DOM、BOM，所以说jQuery封装的ajax只是其中的一小部分，如果通过引用jQuery来进行ajax交互实在是显得有所浪费资源，因此vue中封装了axios来实现对ajax技术的单独封装。

二、关于原生ajax的使用步骤

    <script>
      const qs = Qs;
      const baseUrl = "http://39.103.216.42:8888";
      const queryData = {
        page: 1,
        pageSize: 10,
      };
      const loginData = {
        username: "admin1",
        password: 123321,
      };
      const applyData = {
        name: "tom",
        age: 12,
        telephone: 13455667788,
        gender: "male",
      };


      // 1.实例化http请求对象
      let xhr = new XMLHttpRequest();


      // 2.打开连接，设置请求的配置参数
      //（1）请求方式为--get请求
      xhr.open("get", baseUrl + "/index/category/findAll");
      //请求头携带参数，通过qs进行数据类型转换
      const qsData = qs.stringify(queryData);
      xhr.open("get", baseUrl + "/index/article/pageQuery" + "?" + qsData);
      //（2）请求方式为--post请求
      //（2.1）设置将要发送数据的格式--json数据类型
      xhr.open("post", baseUrl + "/user/login");
      xhr.setRequestHeader("Content-Type", "application/json");
      //（2.2）设置将要发送数据的格式--表单数据类型
      xhr.open("post", baseUrl + "/user/login");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


      // 3.发送请求并且配置请求体中的参数
      //（1）get请求方式
      xhr.send();
      //（2）post请求方式
      //（2.1）将要发送数据的类型转化为JSON字符串
      xhr.send(JSON.stringify(loginData));
      //（2.2）将要发送数据的类型转化为查询字符串
      xhr.send(qs.stringify(applyData));


      // 4.监听http连接状态的改变，获取响应
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(JSON.parse(xhr.response));
        }
      };
    </script>

三、jQuery中ajax的使用

    <script>
      const baseURL = "http://39.103.216.42:8888";
      const applyData = {
        name: "tom",
        age: 12,
        telephone: 123444232,
        gender: "male",
      };
      //默认传递表单格式数据
      $.ajax({
        url: baseURL + "/index/category/findAll",
        method: "get",
        success(res) {
          console.log(res);
        },
        error(error) {
          console.log(error);
        },
      });
      //将数据类型转换为JSON格式
      $.ajax({
        url: baseURL + "/user/login",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: JSON.stringify(loginData),
        success(res) {
          console.log(res);
        },
        error(error) {
          console.log(error);
        },
      });
    </script>

四、axios的使用

    <script>
      let qs = Qs;
      const loginData = {
        username: "admin1",
        password: "123321",
      };
      //post方式传参
      // 默认传递JSON格式的数据
      axios({
        baseURL: "http://39.103.216.42:8888",
        url: "/user/login",
        method: "post",
        data: loginData,
      }) //链式调用：then返回的结果也是一个promise实例
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
      //传递表单形式的数据
      axios({
        baseURL: "http://39.103.216.42:8888",
        url: "/user/login",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify(loginData),
      });
      //get格式传参
      axios({
        baseURL: "http://39.103.216.42:8888",
        url: "/user/login",
        method: "get",
        params: {
          page: 1,
          pageSize: 10,
        },
      });
    </script>