需要进行无依赖的 Ajax 吗？

长期以来，使用 jQuery 的一个主要原因是它使 Ajax 操作变得非常容易。 它拥有一个超级简洁、灵活且跨浏览器兼容的 API，适用于所有 Ajax 方法。 jQuery 仍然非常流行，但现在越来越多的人开始放弃它，特别是在旧版浏览器的市场份额下降，而新版浏览器拥有许多我们过去在 jQuery 中学习的强大功能的情况下。 即使是 querySelectorAll 也经常被认为是放弃 jQuery 依赖的理由。

Ajax 现在怎么样了？

假设我们需要进行一个 GET 请求，从一个 URL 终结点获取一些 HTML。 我们不会进行任何错误处理，以保持简洁。

jQuery 的做法是这样的

$.ajax({
  type: "GET",
  url: "/url/endpoint/",
}).done(function(data) {
  // We got the `data`!
});

如果我们想放弃 jQuery，使用浏览器原生的 Ajax，我们可以这样操作

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = ajaxDone;
httpRequest.open('GET', '/url/endpoint/');
httpRequest.send();

function ajaxDone() {
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      // We got the `httpRequest.responseText`! 
    }
  }
}

浏览器的支持情况有点复杂。 基本功能可以追溯到 IE 7，但真正稳定是在 IE 10 开始。 如果你想更健壮，但仍然跳过任何依赖项，你甚至可以使用 window.ActiveXObject 作为回退，甚至可以降到 IE 6。

总之，在没有任何依赖的情况下进行 Ajax 并获得相当广泛的浏览器支持是完全可能的。 请记住，jQuery 本质上也是 JavaScript，因此你始终可以模仿它在后台的操作。

但是，jQuery 在它的 Ajax 中做了一件别的事情，它已经做了一段时间了：它的 Promise 是基于的。 Promise 的许多酷炫之处之一，特别是在与像 Ajax 这样的“异步”事件结合使用时，它允许你 并行运行多个请求，这对性能来说非常棒。

我刚刚发布的原生 Ajax 代码不是基于 Promise 的。

如果你想要一个强大的、便捷的基于 Promise 的 Ajax API，并且具有相当不错的跨浏览器支持（可追溯到 IE 8），你可以考虑使用 Axios。 没错，它与 jQuery 一样是一种依赖项，只是它专注于 Ajax，在 GZip 之前的体积只有 11.8 KB，并且本身没有任何依赖项。

使用 Axios，代码看起来像这样

axios({
  method: 'GET',
  url: '/url/endpoint/'
}).then(function(response) {
  // We got the `response.data`!
});

注意 then 语句，这意味着我们回到了 Promise 的世界。 小贴士，显然这些请求在 服务器端 看起来并不完全相同。

不过，浏览器还没有放弃我们！ 现在有一个相当新的 Fetch API，它使用基于 Promise 的 Ajax 以及简洁的语法。

fetch('/url/endpoint/')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    // We got the `text`!
  });

对它的浏览器支持也越来越好！ 它已包含在所有稳定的桌面浏览器中，包括 Edge。 危险区域是没有 IE 支持，只有 iOS 10.1 及更高版本。