XMLHttpRequest 传递参数 - POST

XMLHttpRequest (XHR) 是一种用于与服务器交互的 JavaScript API 。通过 XHR，您可以在不重新加载整个页面的情况下获取数据。XHR 可以用于任何类型的数据，但最常用的用途是与 XML 和 JSON 配合使用。

在本文中，我们将看一下如何使用 XHR 实现 POST 请求并传递参数。

步骤

1. 创建一个新的 XMLHttpRequest 实例。

   var xhr = new XMLHttpRequest();
   

2. 设置请求的 URL。我们还需要指定请求的类型，这里是 POST 请求。最后，我们需要将请求标记为异步，并在请求完成后执行回调函数。

   xhr.open('POST', '/api/data', true);
   xhr.onload = function() {
     // 处理响应数据
   };
   

3. 设置请求头。我们需要告诉服务器我们在发送的数据类型是什么。在这个例子中，我们将发送 JSON 数据，所以我们要设置 Content-Type 为 application/json。

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

4. 当请求完成时，我们需要将数据作为字符串发送到服务器。在这个例子中，我们将使用一个对象，将它转换成 JSON 字符串，然后将其发送。

   var data = {
     name: 'John Smith',
     age: 32
   };
   
   xhr.send(JSON.stringify(data));
   

示例

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  console.log(xhr.responseText);
};

var data = {
  name: 'John Smith',
  age: 32
};

xhr.send(JSON.stringify(data));

结论

以上就是使用 XHR 实现 POST 请求并传递参数的步骤。注意，您可以发送任何类型的数据 - 取决于您的服务器如何处理它们。

请记住，如果您正在发送敏感数据，最好使用安全协议（例如 HTTPS）进行传输。