JavaScript - HTTP 请求

Http 是一种协议，代表超文本传输​​协议 (Hypertext Transfer Protocol)。HTTP 请求用于与 Web 服务器通信。它允许我们向服务器发送请求并获取响应。这些请求可用于获取数据、提交表单、上传文件等等。

HTTP 方法

以下是最常用的 HTTP 方法:

• GET:此方法用于从服务器获取我们需要的信息。我们可以将其理解为请求一条信息，但不向服务器发送任何额外信息。
• POST:此方法用于发送数据到存储该数据的服务器。通常，提交表单时，我们会将信息存储到服务器上。
• PUT:此方法用于更新服务器上已有的数据。例如，在代码片段中，您填写了错误的表单信息，需要将其更正。
• DELETE:此方法用于删除不再需要的内容，您可以从服务器中删除它们。
• PATCH:此方法在更新部分信息时非常有用。在代码片段中，如果您在表单中输入了拼写错误，可以使用 PATCH 进行更新。

在 JavaScript 中发出 HTTP 请求的方法

在 JavaScript 中发出 http 请求的方法如下:

• 使用 XMLHttpRequest (XHR)
• 使用 Fetch API

使用 XMLHttpRequest (XHR)

XMLHttpRequest 是一个古老的内置浏览器对象，可以帮助我们在 JavaScript 中发出 http 请求。它用于从服务器获取数据并将数据发送到服务器。

代码片段

以下代码片段展示了如何使用 XMLHttpRequest 发出请求

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置它:对 URL /article/.../load 进行 GET 请求
xhr.open('GET', '/article/.../load', true);

// 通过网络发送请求
xhr.send();

这就是我们使用 XMLHttpRequest 发出一个非常简单的 GET 请求的方法。我们还可以使用同一个 XMLHttpRequest 发出 POST、PUT 和 DELETE 请求。

使用 Fetch API

Fetch API 是一种使用 JavaScript 发出 http 请求的现代方法。它可以帮助我们从服务器获取数据，并将数据发送到服务器。它内置于浏览器，这意味着您无需任何额外的库即可使用它。

代码片段

以下代码片段展示了如何使用 Fetch API 发出请求

// 发出请求
fetch('/article/.../load')
  .then(response => response.json())
  .then(data => alert(data.title))
  .catch(error => alert(error));

以上就是如何使用 Fetch API 轻松发起 GET 请求。我们也可以使用 Fetch API 发起 POST、PUT 和 DELETE 请求。

总结

HTTP 请求主要用于与 Web 服务器通信。我们确实有多种发起请求的方法。我们可以使用这些请求来获取数据、提交表单、上传文件等等。在 JavaScript 中，有两种方法可以发起 http 请求:使用 XMLHttpRequest 和 Fetch API。