怎么利用网页发送请求json

发送JSON请求是现代Web开发中的一项基本技能，无论是在前端还是后端，都经常需要与API进行交互，我们就来聊聊如何利用网页发送JSON请求，让你的应用更加灵活和强大。

我们需要了解JSON是什么，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于JavaScript的一个子集，但是独立于语言，所以很多编程语言都能处理JSON数据。

在网页中发送JSON请求，最常用的方式是通过AJAX（Asynchronous JavaScript and XML），AJAX允许我们在不刷新整个页面的情况下，与服务器进行数据交换和更新部分网页，但是随着技术的发展，现在我们更倾向于使用现代的Fetch API或者XMLHttpRequest对象来发送请求。

使用Fetch API发送JSON请求

Fetch API提供了一个强大而灵活的方式来进行HTTP请求，它返回一个Promise对象，使得异步操作变得简单，下面是一个使用Fetch API发送JSON请求的基本示例：

// 定义请求的URL
const url = 'https://api.example.com/data';
// 创建一个请求对象
const request = new Request(url, {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json' // 设置请求头，告诉服务器我们发送的是JSON数据
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  }) // 将JavaScript对象转换为JSON字符串
});
// 使用fetch发送请求
fetch(request)
  .then(response => response.json()) // 解析JSON响应
  .then(data => console.log(data)) // 处理数据
  .catch(error => console.error('Error:', error)); // 处理错误

在上面的代码中，我们首先创建了一个Request对象，指定了请求的URL、方法、头部信息和请求体，我们使用fetch函数发送请求，并在Promise链中处理响应。

使用XMLHttpRequest发送JSON请求

虽然Fetch API是现代浏览器推荐的方式，但在一些旧的浏览器或特定场景下，你可能需要使用XMLHttpRequest，下面是如何使用XMLHttpRequest发送JSON请求的示例：

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 配置请求
xhr.open('POST', 'https://api.example.com/data', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 设置响应类型为JSON
xhr.responseType = 'json';
// 定义响应处理函数
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理响应数据
    console.log(xhr.response);
  } else {
    // 请求失败，处理错误
    console.error(xhr.statusText);
  }
};
// 定义错误处理函数
xhr.onerror = function () {
  console.error('Request error...');
};
// 发送请求
xhr.send(JSON.stringify({
  key1: 'value1',
  key2: 'value2'
}));

在这个例子中，我们创建了一个XMLHttpRequest对象，并设置了请求方法、URL、请求头和响应类型，我们定义了onload和onerror事件处理函数来处理请求的响应和错误。