如何向 Web 服务器发送请求 JavaScript

在 Web 开发中，我们常常需要向服务器发送请求，获取数据或者向服务器传递数据。 在 JavaScript 中，我们可以使用 XMLHttpRequest 对象来实现向服务器发送请求。

XMLHttpRequest 对象

XMLHttpRequest 对象是一个 JavaScript 内置对象，用于在后台与服务器交换数据。这个对象是所有现代浏览器都支持的。

在使用 XMLHttpRequest 对象时，我们必须了解以下几个属性和方法：

• open()：初始化请求。该方法接收三个参数：请求方法（GET、POST 等）、请求地址和是否异步处理（ true 或 false ）。
• send()：将请求发送到服务器。可以通过这个方法向服务器发送数据。
• onreadystatechange：请求状态发生变化时的回调函数。

下面是一个示例代码，演示了如何使用 XMLHttpRequest 对象向服务器发送 GET 请求并获取返回的数据：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.open('GET', 'http://example.com/api', true);
xhr.send();

fetch API

除了使用 XMLHttpRequest 对象，我们还可以使用 fetch API 发送请求。 fetch API 是一个基于 Promise 实现的功能更加强大、易于使用的接口。

fetch API 使用简单，只需传入一个 URL 和一个可选配置对象即可。下面是一个示例代码，演示了如何使用 fetch API 向服务器发送 POST 请求并获取返回的数据：

fetch('http://example.com/api', {
  method: 'POST',
  body: JSON.stringify({ username: 'example', password: 'password' }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

axios

除了以上两种方式，我们还可以使用第三方库 axios 发送请求。axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。它具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据

下面是一个使用 axios 发送 GET 请求的示例代码：

axios.get('http://example.com/api')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

结语

以上就是如何向 Web 服务器发送请求的几种方式。在实际开发中，我们可以根据具体的需求和项目特点选择合适的方式。如果使用原生的 XMLHttpRequest 对象，需要注意兼容性和代码的复杂度；如果使用 fetch API，可以获得更加简洁和易于使用的代码；如果使用第三方库 axios，可以获得更多的功能和更好的可读性。