在 Javascript 中使用 AJAX XMLHttpRequest 对象将 json 数据发送到服务器

AJAX (Asynchronous JavaScript and XML) 是一种用于创建动态网页的技术，在 Javascript 中，我们可以使用 XMLHttpRequest 对象来实现 AJAX 功能。其中，最常见的用途就是将 json 数据发送到服务器。

创建 XMLHttpRequest 对象

要使用 XMLHttpRequest 对象，首先我们需要创建一个新的实例：

var xhr = new XMLHttpRequest();

准备请求

创建完 XMLHttpRequest 实例之后，我们需要设置请求的参数，包括请求方法、请求的 URL 以及是否使用异步模式。

xhr.open('POST', '/api/data', true);

上述代码中，我们使用 POST 方法向服务器发送请求，请求的 URL 是 /api/data，同时启用异步模式。

设置请求头

通常情况下，我们还需要设置一些请求头，例如 Content-Type 和 Accept。这里我们使用 application/json 来表示要发送的数据类型是 JSON。

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json')

发送请求

一切准备工作完成后，我们就可以将 json 数据发送到服务器了。对于 json 数据，需要先将其转换为字符串，然后使用 send() 方法进行发送。

var data = { key1: 'value1', key2: 'value2' };
xhr.send(JSON.stringify(data));

上述代码中，我们定义了一个包含两个键值对的对象 data，然后使用 JSON.stringify() 方法将其转换为 JSON 字符串，最后再将其发送到服务器。

处理响应

最后，我们需要处理从服务器返回的响应。可以在 xhr 对象上绑定 onload 事件，该事件将在服务器返回了响应后触发。

xhr.onload = function () {
  if (xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
}

上述代码中，我们首先检查服务器返回的状态码是否为 200，如果是，那么将响应文本转换为对象，并在控制台中打印出来。

完整代码片段如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json')
var data = { key1: 'value1', key2: 'value2' };
xhr.send(JSON.stringify(data));
xhr.onload = function () {
  if (xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
}

以上就是在 Javascript 中使用 AJAX XMLHttpRequest 对象将 json 数据发送到服务器的基本流程。