在 JavaScript 中发送 JSON

在现代 Web 应用程序中，使用 JSON（JavaScript Object Notation）来表示和交换数据是非常普遍的。在这篇文章中，我们将探讨如何使用 JavaScript 发送 JSON 数据。

JSON

JSON 是一种轻量级的数据交换格式，具有易于读取和编写的文本格式，用于表示结构化的数据。它由对象和数组组成，可以嵌套并拥有简单的基础数据类型（如字符串、数字、布尔值和 null）。

以下是一个简单的 JSON 对象示例：

{
  "name": "John Smith",
  "age": 30,
  "isMarried": false,
  "hobbies": ["reading", "swimming", "traveling"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001"
  }
}

发送 JSON

有几种方法可以在 JavaScript 中发送 JSON。其中最常见的方法是使用 XMLHttpRequest（XHR）对象。XHR 允许 JavaScript 发送 HTTP 请求和接收 HTTP 响应，并且可以轻松发送和接收 JSON 数据。

发送 GET 请求

以下代码演示如何使用 XHR 对象发送 GET 请求并接收 JSON 响应：

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

在上面的代码中，我们创建了一个新的 XHR 对象并打开了一个 GET 请求以获取位于 https://example.com/api/data 的 JSON 数据。我们使用 onreadystatechange 事件处理程序来处理 XHR 对象状态的变化，并在状态为 4（完成）且 HTTP 响应状态码为 200 时处理响应。

使用 JSON.parse 函数将响应文本解析为 JSON 对象，并将其输出到控制台中。

发送 POST 请求

以下代码演示如何使用 XHR 对象发送 POST 请求并将 JSON 数据作为请求主体：

const xhr = new XMLHttpRequest();
const url = "https://example.com/api/data";
const data = {
  name: "John Smith",
  age: 30,
  isMarried: false,
  hobbies: ["reading", "swimming", "traveling"],
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY",
    zip: "10001",
  },
};
const json = JSON.stringify(data);
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send(json);

在上面的代码中，我们创建了一个新的 XHR 对象并打开了一个 POST 请求以将 JSON 数据发送到 https://example.com/api/data。我们使用 JSON.stringify 函数将 JavaScript 对象转换为 JSON 文本并将其设置为 XHR 对象的请求主体。

使用 setRequestHeader 方法设置请求头 Content-Type 为 application/json，以指示服务器发送的是 JSON 数据。

然后，我们使用 onreadystatechange 事件处理程序处理 XHR 对象状态的变化，并在状态为 4（完成）且 HTTP 响应状态码为 200 时处理响应。我们还使用 JSON.parse 函数将响应文本解析为 JSON 对象，并将其输出到控制台中。

结论

在 JavaScript 中发送 JSON 数据是非常普遍和有用的任务。使用 XMLHttpRequest 可以轻松地发送和接收 JSON 数据，并且可以在许多 Web 应用程序中进行操作。