XMLHTTPREQUEST与Ajax的提取API

核心要点

• JavaScript 中，Fetch API 和 XMLHttpRequest 都用于发出 HTTP 请求，但 Fetch API 通常被认为更强大、更灵活，因为它使用 Promise，简化了代码和错误处理。然而，并非所有浏览器都支持 Fetch API，特别是较旧的浏览器。
• XMLHttpRequest 虽然较旧且由于缺乏 Promise 而更复杂，但它在所有浏览器中都得到广泛支持，并且默认情况下会发送 Cookie，这对于需要 Cookie 进行身份验证的服务器请求非常有用。
• Fetch API 并非 Ajax 技术的完全替代品，因为它不支持所有 XHR 功能，并且某些选项可能很繁琐。它也不支持超时，使得错误捕获的实现更加复杂。
• 尽管 Fetch API 有其局限性，但它是 JavaScript 中发出 HTTP 请求的未来方向。但是，由于其相对较新且不断变化，开发人员在未来几年应谨慎使用它。

XMLHttpRequest 与 Fetch API 的权衡比较

本文将比较 XMLHttpRequest 和其现代化的 Ajax 实现 Fetch API 的优缺点。2019 年 3 月是 Ajax 的 20 周年纪念日（某种程度上）。XMLHttpRequest 的第一个实现于 1999 年作为 IE5.0 的 ActiveX 组件发布（别问）。在此之前，也有一些方法可以在不进行整页刷新的情况下从服务器提取数据，但它们通常依赖于笨拙的技术，例如注入或第三方插件。微软开发 XMLHttpRequest 的主要目的是为其基于浏览器的 Outlook 邮件客户端提供替代方案。

直到 2006 年，XMLHttpRequest 才成为 Web 标准，但它已在大多数浏览器中实现。它在 Gmail（2004 年）和 Google Maps（2005 年）中的采用导致 Jesse James Garrett 于 2005 年发表了文章《AJAX：一种新的 Web 应用程序方法》。这个新术语使开发人员的关注点更加明确。

从 AJAX 到 Ajax

AJAX 是异步 JavaScript 和 XML 的缩写。“异步”肯定是正确的，但是：

1. 可能是 JavaScript，尽管 VBScript 和 Flash 也是可选的。
2. 有效负载不需要是 XML，尽管当时 XML 很流行。可以使用任何数据格式，而如今通常更喜欢 JSON。

我们现在使用“Ajax”作为泛指任何从服务器获取数据并动态更新 DOM 而无需进行整页刷新的客户端进程的通用术语。Ajax 是大多数 Web 应用程序和单页应用程序 (SPA) 的核心技术。

深入了解 XMLHttpRequest

以下 JavaScript 代码展示了使用 XMLHttpRequest（通常缩写为 XHR）对 https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c 发出基本的 HTTP GET 请求：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

XMLHttpRequest 对象还有许多其他选项、事件和响应属性。例如，可以设置和检测以毫秒为单位的超时：

// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

进度事件可以报告长时间运行的文件上传：

// 上传进度
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};

选项的数量可能令人眼花缭乱，早期版本的 XMLHttpRequest 存在一些跨浏览器的不一致之处。因此，大多数库和框架都提供 Ajax 包装函数来处理复杂性，例如 jQuery.ajax() 方法：

// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

快速了解 Fetch

Fetch API 是 XMLHttpRequest 的现代替代方案。通用的 Headers、Request 和 Response 接口提供一致性，而 Promise 允许更轻松地进行链式操作和 async/await 而无需回调。上面的 XHR 示例可以转换为更简单的基于 Fetch 的代码，它甚至可以解析返回的 JSON：

fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

Fetch 简洁、优雅、易于理解，并且广泛用于 PWA 服务工作者。为什么不使用它来代替古老的 XMLHttpRequest 呢？

不幸的是，Web 开发永远不会那么简单。Fetch 还没有完全替代 Ajax 技术……

浏览器支持

Fetch API 的支持度相当好，但在所有版本的 Internet Explorer 中都会失败。使用 2017 年之前的 Chrome、Firefox 和 Safari 版本的用户也可能会遇到问题。这些用户可能只占您用户群的一小部分……或者它可能是一个主要客户。在开始编码之前务必检查！

此外，Fetch API 比较新，并且比成熟的 XHR 对象接收更多持续的更改。这些更新不太可能破坏代码，但预计未来几年需要进行一些维护工作。

默认情况下不包含 Cookie

与 XMLHttpRequest 不同，并非所有 Fetch 实现都会发送 Cookie，因此您的应用程序的身份验证可能会失败。可以通过更改第二个参数中传递的初始化选项来解决此问题，例如：

fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    {
      method: 'GET',
      credentials: 'same-origin'
    }
  )

错误不会被拒绝

令人惊讶的是，HTTP 错误（例如 404 页面未找到或 500 内部服务器错误）不会导致 Fetch Promise 被拒绝；.catch() 永远不会运行。它通常会解析，并将 response.ok 状态设置为 false。

只有在无法完成请求时（例如网络故障）才会发生拒绝。这会使错误捕获的实现更加复杂。

不支持超时

Fetch 不支持超时，请求将持续浏览器选择的时间。需要进一步的代码才能将 Fetch 包装在另一个 Promise 中，例如：

// 带有超时的 fetch
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  });
}

……或者可能使用 Promise.race()，它在 fetch 或超时首先完成时解析，例如：

Promise.race([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then(response => console.log(response))

中止 Fetch

使用 xhr.abort() 可以轻松结束 XHR 请求，并且如果需要，可以使用 xhr.onabort 函数检测此类事件。

多年来，中止 Fetch 是不可能的，但现在在实现 AbortController API 的浏览器中已受支持。这会触发一个信号，该信号可以传递给 Fetch 初始化对象：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

通过调用 controller.abort(); 可以中止 Fetch。Promise 会被拒绝，因此会调用 .catch() 函数。

没有进度

在撰写本文时，Fetch 不支持进度事件。因此，无法报告文件上传或类似的大型表单提交的状态。

XMLHttpRequest 与 Fetch API？

最终，选择权在你……除非你的应用程序有需要上传进度条的 IE 客户端。

对于更简单的 Ajax 调用，XMLHttpRequest 是较低级别的，更复杂的，并且您将需要包装函数。不幸的是，一旦您开始考虑超时的复杂性、调用中止和错误捕获，Fetch 也需要包装函数。

您可以选择与 Promise polyfill 结合使用的 Fetch polyfill，因此可以在 IE 中编写 Fetch 代码。但是，XHR 用作后备；并非每个选项都能按预期工作，例如，无论设置如何，都会发送 Cookie。

Fetch 是未来。但是，该 API 相对较新，它不提供所有 XHR 功能，并且某些选项很繁琐。在未来几年内谨慎使用它。

关于 XMLHttpRequest 和 Fetch API 的常见问题解答 (FAQ)

XMLHttpRequest 和 Fetch API 之间的主要区别是什么？

XMLHttpRequest 和 Fetch API 都用于在 JavaScript 中发出 HTTP 请求。但是，它们在几个方面有所不同。Fetch API 是一种较新的技术，被认为更强大、更灵活。它返回一个 Promise，该 Promise 解析为对该请求的响应，无论其是否成功。Fetch 还提供了 Request 和 Response 对象的通用定义。另一方面，XMLHttpRequest 比较旧，不使用 Promise，这可能会使代码更复杂，更难以维护。它没有 Request 和 Response 对象的通用定义。

Fetch API 比 XMLHttpRequest 好吗？

由于使用了 Promise，Fetch API 通常被认为是 JavaScript 中发出 HTTP 请求的更好选择。Promise 使代码更简洁、更易于阅读，并且还使错误处理更容易。Fetch API 的功能也比 XMLHttpRequest 更强大、更灵活。但是，XMLHttpRequest 仍然被广泛使用和支持，并且在某些情况下可能是更好的选择，例如当您需要支持不支持 Fetch API 的较旧浏览器时。

Fetch API 可以替换 XMLHttpRequest 吗？

是的，Fetch API 可以替换 JavaScript 中用于发出 HTTP 请求的 XMLHttpRequest。Fetch API 是一种较新的技术，并且具有更强大、更灵活的功能集。它使用 Promise，这使得代码更简洁、更易于阅读，并且还使错误处理更容易。但是，XMLHttpRequest 仍然被广泛使用和支持，并且在某些情况下可能是更好的选择，例如当您需要支持不支持 Fetch API 的较旧浏览器时。

使用 Fetch API 的优点是什么？

Fetch API 比 XMLHttpRequest 具有多个优点。它使用 Promise，这使得代码更简洁、更易于阅读，并且还使错误处理更容易。Fetch API 还具有更强大、更灵活的功能集，包括 Request 和 Response 对象的通用定义。它还允许您向其他来源发出请求，而 XMLHttpRequest 则不允许。

使用 Fetch API 的缺点是什么？

使用 Fetch API 的主要缺点之一是并非所有浏览器都支持它。特别是较旧的浏览器可能不支持 Fetch API。在这些情况下，您可能需要使用 XMLHttpRequest 或 polyfill。另一个缺点是 Fetch API 默认情况下不会发送 Cookie，因此如果您想发送 Cookie，则需要手动设置 credentials 选项为“include”。

使用 XMLHttpRequest 的优点是什么？

XMLHttpRequest 是一种经过验证的技术，用于在 JavaScript 中发出 HTTP 请求。它得到广泛支持，并且可以在所有浏览器中使用。与 Fetch API 不同，XMLHttpRequest 还会默认发送 Cookie。在某些情况下，这可能是一个优势，例如当您向需要 Cookie 进行身份验证的服务器发出请求时。

使用 XMLHttpRequest 的缺点是什么？

XMLHttpRequest 不使用 Promise，这可能会使代码更复杂，更难以维护。它也没有 Request 和 Response 对象的通用定义，并且不允许您向其他来源发出请求。与 Fetch API 等较新的技术相比，XMLHttpRequest 也被认为有点过时了。

如何选择 XMLHttpRequest 和 Fetch API？

选择 XMLHttpRequest 和 Fetch API 取决于您的特定需求以及您需要支持的浏览器。如果您需要支持不支持 Fetch API 的较旧浏览器，那么 XMLHttpRequest 可能是更好的选择。但是，如果您使用的是较新的浏览器，并且想要利用 Fetch API 更简洁、更现代的语法以及更强大、更灵活的功能集，那么 Fetch API 将是更好的选择。

我可以在同一个项目中同时使用 XMLHttpRequest 和 Fetch API 吗？

是的，您可以在同一个项目中同时使用 XMLHttpRequest 和 Fetch API。您可以根据您的特定需求以及您需要支持的浏览器，选择对某些任务使用 XMLHttpRequest，对其他任务使用 Fetch API。但是，通常建议为了一致性和易于维护而坚持使用其中一种。

是否有任何替代 XMLHttpRequest 和 Fetch API 用于在 JavaScript 中发出 HTTP 请求的方案？

是的，有几种替代 XMLHttpRequest 和 Fetch API 用于在 JavaScript 中发出 HTTP 请求的方案。这些包括 Axios、jQuery 的 $.ajax 和 SuperAgent 等库。这些库提供了更高级别的接口来发出 HTTP 请求，并且与 XMLHttpRequest 和 Fetch API 相比，可以提供其他功能和便利。

以上是XMLHTTPREQUEST与Ajax的提取API的详细内容。更多信息请关注PHP中文网其他相关文章！