如何将 JSON 数据添加到 XMLHttpRequest - Javascript

在前端开发中，我们经常需要与服务器进行数据交互。而 HTTP 请求是前端与服务器进行数据交互的主要方式之一。在 HTTP 请求过程中，客户端需要给服务器发送一个请求，服务器则返回响应。 XMLHTTPRequest 是一个非常常用的前端进行 HTTP 请求的工具，本文将介绍如何将 JSON 数据添加到 XMLHTTPRequest 中进行请求。

步骤一：创建 XMLHttpRequest 对象

要发送 HTTP 请求，我们首先需要创建一个 XMLHttpRequest 对象。XMLHttpRequest 是前后端进行通信的桥梁，它具有很多重要的属性和方法。以下是创建 XMLHttpRequest 的代码。

var xhr = new XMLHttpRequest();

步骤二：准备请求的 URL 和数据

在发送 HTTP 请求之前，我们需要知道请求的 URL 和需要发送的数据。URL 是服务器地址，数据可以是表单数据、JSON 数据或其他格式的数据。这里以 JSON 数据为例。

var url = "http://example.com/api";
var data = {
  name: "John",
  age: 25
};

var json = JSON.stringify(data);

在以上代码中，我们通过 JSON.stringify 函数将数据转换成 JSON 字符串。

步骤三：设置请求的 HTTP 方法和请求头

在发送 HTTP 请求之前，我们还需要设置请求的 HTTP 方法和请求头。

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");

在以上代码中，我们设置了 HTTP 方法为 POST，请求头中的 Content-type 属性为 application/json。这表示我们发送的数据是 JSON 格式的。

步骤四：发送请求并处理响应

最后一步是发送 HTTP 请求并处理响应。我们可以使用 xhr.send 方法发送请求，使用 xhr.onreadystatechange 监听状态变化，使用 xhr.responseText 获取服务器返回的数据。以下是代码示例。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

xhr.send(json);

在以上代码中，我们监听了 xhr 对象的状态变化。当状态为 4 时并且状态码为 200 时，表示请求成功，我们可以通过 JSON.parse 解析服务器返回的 JSON 字符串，并输出到控制台中。

以上就是如何将 JSON 数据添加到 XMLHttpRequest 中进行 HTTP 请求的详细步骤。