关键图解
image

Ajax

全称（Asynchronous JavaScript And XML）

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。
他可以局部刷新页面，不用重载整个页面。

XHR

XHR(XmlHttpRequest)是一种用来实现Ajax的方法
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>

注意：我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱，这也是一个诟病，后来才催生了更加优雅的请求方式。

Fetch

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

  • 使用 promise，不使用回调函数。
  • 采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
  • 通过数据流对象处理数据，可以提高网站性能。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
      <script>
        function ajaxFetch(url) {
          fetch(url).then(res => res.json()).then(data => {
            console.info(data)
          })
        }
        ajaxFetch('https://smallpig.site/api/category/getCategory')
      </script>
    </body>

Axois

  • 他是一个封装库，是基于XHR来实现的。
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API（异步请求时会返回Promise）
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 发送 POST 请求
    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })

    引用自知乎