原生ajax、jquery ajax、axios对比总结

1.介绍

原生ajax： ajax全称Asynchronous JavaScript and XML，即为异步的 JavaScript 和 XML。ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
jquery ajax： jquery 提供多个与 ajax有关的方法。通过 jquery ajax方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
aixos： Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。与jquery ajax不同的是，jquery ajax仅适用于浏览器，而axios可用于浏览器和node.js的http客户端。

2.主要代码实现

原生ajax：

• get方式

 <script src="../js/qs-6.9.4.min.js"></script>
 <script>
    let qs = Qs
    // 1.创建对象
    let xhr = new XMLHttpRequest()
	// 2.向服务器发送一个请求
    xhr.open('get', 'http://47.106.244.1:8099/manager/category/findAllCategory?' + qs.stringify({ id: 1 }))
    xhr.send()
    // 3.接收响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

• post方式
  • (表单格式）

 <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    // 1.创建对象
    let xhr = new XMLHttpRequest()
    // 2.打开连接
    xhr.open('post', 'http://47.106.244.1:8099/manager/category/findAllCategory')
    // 3.设置请求头部
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') //默认为表单数据格式，不用设置表单的请求头部
	// 4.发送请求
    xhr.send({ id: 1 }) 
    // xhr.send(qs.stringify({ id: 1 })) //默认为表单数据格式，因此不用转为查询字符串格式
    // 5.接收响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

• (JSON格式）

  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    // 1.创建对象
    let xhr = new XMLHttpRequest()
    // 2.打开连接
    xhr.open('post', 'http://47.106.244.1:8099/manager/category/findAllCategory')
    // 3.设置请求头部
    xhr.setRequestHeader('Content-Type', 'application/json')
	// 4.发送请求
    xhr.send(JSON.stringify({ id: 1 }))
    // 5.接收响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

Qs的作用是将一个js对象转为查询字符串

解释：
XMLHttpRequest ：用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
onreadystatechange 事件：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState：存有 XMLHttpRequest 的状态
从 0 到 4 发生变化：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status： 状态码
200：“ok”
404：“未找到页面”
responseText： 获得字符串形式的响应数据
responseXML： 获得 XML 形式的响应数据

jquery ajax：

• get方式

  <script src="../js/jquery-3.5.1.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    $.ajax({
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: "get",
      data: {
        id: 1,
        name: 'zhangsan'
      },
      headers: {},
      success() { },
      error() { }
    })
  </script>

• post方式
  • （表单格式）

<script src="../js/jquery-3.5.1.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    $.ajax({
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: "post",
      // 默认表单数据 不需要用qs.stringify
       data: {
         id: 1,
        name: 'zhangsan'
      },
      headers: {
        // 默认表单数据 不需要设置表单的请求头
        // "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
      },
      success() { },
      error() { }
    })
  </script>

• （JSON格式）

  <script src="../js/jquery-3.5.1.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    $.ajax({
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: "post",
      // 要发json格式数据的话 必须要写JSON.stringify
      data: JSON.stringify({
        id: 1,
        name: 'zhangsan'
      }),
      headers: {
        "Content-Type": "application/json"
      },
      success() { },
      error() { }
    })
  </script>

axios：

• get方式

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    // axios默认为json格式数据
    axios({
      // 配置对象
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: 'get',
      // get带参
      params: { id: 1 },
      headers: {}
    })
  </script>

• post方式
  • （表单格式）

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>

  <script>
    let qs = Qs
    axios({
      // 配置对象
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: 'post',
      // post带参
      data: qs.stringify({ name: 'zhangsan' }),
      // 头部
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    })
  </script>

• （JSON格式）

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
  <script src="../js/qs-6.9.4.min.js"></script>
  <script>
    let qs = Qs
    axios({
      // 配置对象
      url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
      method: 'post',
      // post带参
      data: { name: 'zhangsan' },
      // 头部
      headers: {}
    })
  </script>

3.jquery ajax和axios对比总结