Javascript 发出 HTTP 请求 - Javascript

在 Web 开发中，我们经常需要通过 JavaScript 发出 HTTP 请求。这些请求可以用于获取数据、发送表单、上传文件或与服务器上的其他 Web 服务进行交互。在本文中，我们将学习如何使用 JavaScript 发出 HTTP 请求。

XMLHttpRequest 对象

JavaScript 发出 HTTP 请求的主要方式是使用 XMLHttpRequest 对象。这个对象可以向服务器发出 HTTP 请求，并处理服务器返回的响应。下面是一个例子：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置 HTTP 请求方法和 URL
xhr.open("GET", "https://api.github.com");

// 发送 HTTP 请求
xhr.send();

// 处理服务器返回的响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);
  }
}

以上代码创建了一个 XMLHttpRequest 对象，设置了 HTTP 请求方法和 URL，然后发送了一个 HTTP GET 请求。当服务器返回响应后，我们可以使用 onreadystatechange 事件来处理响应。此时，我们可以在控制台上打印响应的文本内容。

fetch API

除了 XMLHttpRequest 对象之外，JavaScript 还提供了 fetch API。fetch API 是一个基于 Promise 的 API，提供了一种更简单、更直接的方式来发出 HTTP 请求。下面是一个例子：

fetch("https://api.github.com")
  .then(response => response.json())
  .then(json => console.log(json));

以上代码使用 fetch API 发出了一个 HTTP GET 请求，然后处理了服务器返回的响应。这个例子中，我们也可以在控制台上打印响应的 JSON 内容。

axios 库

除了 JavaScript 自带的 XMLHttpRequest 和 fetch API，我们还可以使用 axios 库来发出 HTTP 请求。axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。

axios.get("https://api.github.com")
  .then(response => console.log(response.data));

以上代码使用 axios 库发出了一个 HTTP GET 请求，并在响应处理函数中打印了响应的数据。axios 的 API 要比原生的 XMLHttpRequest 和 fetch API 更加简洁和直观。

结论

在本文中，我们学习了如何使用 JavaScript 发出 HTTP 请求。我们使用了原生的 XMLHttpRequest 和 fetch API，以及第三方库 axios。这些工具都提供了一种简单、直接的方式来与远程服务器进行交互。