如何用Javascript发出HTTP请求?

:MNongSciFans

已于 2024-02-22 10:45:47 修改

阅读量904

点赞数 14

文章标签： javascript

于 2024-02-22 10:43:51 首次发布

本文链接：https://blog.csdn.net/david_232656/article/details/136226215

版权

在Javascript中，可以使用内置的XMLHttpRequest对象或fetch()函数来发出HTTP请求。

使用XMLHttpRequest

XMLHttpRequest 最初是由 1999 年发布的 IE5.0 ActiveX 组件实现的。在此之前，倒是有一些办法可以在不刷新页面的情况下从服务器获取数据，但是他们通常依赖一些笨拙的技术，例如通过 <script> 注入或是一些第三方插件。微软开发了XMLHttpRequest的初始版本, 用于替代 Outlook 基于浏览器的电子邮件客户端。

XMLHttpRequest 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。
事件处理程序实际上就是异步编程的一种形式：你提供的函数（事件处理程序）将在事件发生时被调用（而不是立即被调用）。如果“事件”是“异步操作已经完成”，那么你就可以看到事件如何被用来通知调用者异步函数调用的结果的。

一些早期的异步 API 正是以这种方式来使用事件的。XMLHttpRequest API 可以让你用 JavaScript 向远程服务器发起 HTTP 请求。由于这样的操作可能需要很长的时间，所以它被设计成异步 API，你可以通过给 XMLHttpRequest 对象附加事件监听器来让程序在请求进展和最终完成时获得通知。

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

如果你的通信流程需要从服务器端接收事件或消息数据，请考虑通过 EventSource 接口使用服务器发送事件。对于全双工的通信，WebSocket 可能是更好的选择。

以下是使用XMLHttpRequest对象发出HTTP GET请求的基本示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log(`Request failed. Returned status of 200`);
  }
};
xhr.send();

上面的代码将向https://api.example.com/data发送一个GET请求。响应将在onload回调函数中处理。如果状态码为200，则输出响应文本；否则输出错误信息。

类似地，可以使用xhr.setRequestHeader()方法设置请求头，并使用xhr.send()方法发送POST请求。

“Ajax” 一般是指在客户端向服务器获取数据并动态的更新 DOM，使得无需刷新整个页面的通用术语。“Ajax” 是大多数 Web 应用程序和单页应用程序（SPA）的核心技术。

很多库和框架都提供了 Ajax 的封装函数，例如jQuery.ajax()方法：

// jQuery Ajax
$.ajax({     
      url: "https://api.example.com/data",   // 请求的 url 地址 
      dataType: "json",               // 返回格式为 json
      async: true,                    // 请求是否异步（默认为异步）    
      data: { "id": "123" },          // 请求携带的参数值 
      type: "GET",                    // 请求方式
      success: function(data) {       //处理接收的 ajax 数据
      },
}).done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

使用fetch()

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

使用fetch()函数也可以发出HTTP请求。以下是使用fetch()函数发出HTTP GET请求的示例：

fetch('https://api.example.com/data')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上面的代码将向https://api.example.com/data发送一个GET请求。响应将在Promise回调函数中处理。如果响应成功，则将响应体作为文本解析并输出到控制台；否则输出错误信息。

类似地，可以使用fetch()函数发送POST请求，同时还可以使用headers属性设置请求头。

Fetch API是XMLHttpRequest的现代替代方案。通用的Header，Request和Response接口提供了一致性，同时 Promises 允许更简单的的链式调用和不需要回调的 async / await。
Fetch 简洁，优雅，易于理解，并且在 PWA Service Worker 中大量使用。与成熟的 XHR 对象相比，Fetch API 较新，并且会接收更多正在进行的更新。这些更新不太可能破坏原始代码，但预计未来几年会进行一定的维护工作。
与XMLHttpRequest不同，Fetch 并不会默认发送 cookie，因此应用的身份验证可能会失败。可以通过更改第二个参数中传递的初始值来解决此问题。
你的应用是要求有上传进度条的 IE 客户端。你也可以选择将Fetch polyfill与Promise polyfill结合使用，以便在 IE 中执行 Fetch 代码。

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

Fetch 的未来可期。但是，该 API 是相对较新，它不提供所有 XHR 的功能，并且某些参数设置比较繁琐。因此在以后的使用过程中，请注意上述问题。

参见：

异步 JavaScript 简介 - 学习 Web 开发 | MDN

XMLHttpRequest - Web API 接口参考 | MDN

使用 Fetch - Web API 接口参考 | MDN

同步和异步请求 - Web API 接口参考 | MDN

XMLHttpRequest vs the Fetch API for Ajax — SitePoint