Vanilla JavaScript 中 GET 和 POST 请求的区别

在 Web 开发中，GET 和 POST 是最常用的 HTTP 请求方法之一。它们都具有不同的目的和方式，本文将介绍它们之间的区别和如何在 Vanilla JavaScript 中使用它们。

GET 请求

GET 请求是通过 URL 向服务器请求数据的一种方法。它是一种无副作用（没有改变服务器的状态）的请求，可以用于获取数据或者执行只读操作。

使用 XMLHttpRequest 发送 GET 请求的示例代码：

const request = new XMLHttpRequest();
request.open('GET', '/user?id=123', true);
request.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};
request.send();

在上面的代码中，我们向 /user 路径发送一个 GET 请求，参数为 id=123。在请求回调函数中，我们获取了服务器返回的文本响应（responseText 属性）。需要注意的是，因为我们使用了 true 作为 async 参数，该请求是异步的，即在发送请求之后还可以执行其他代码。如果 async 参数为 false，则该请求将成为同步请求，当请求等待服务器响应时，JavaScript 将被阻塞而不能执行其他代码。

POST 请求

POST 请求与 GET 请求的区别在于，POST 请求通过请求体向服务器提交数据，而不是通过 URL。它可以用于修改服务器状态，比如向服务器添加、更新或删除数据。

使用 XMLHttpRequest 发送 POST 请求的示例代码：

const request = new XMLHttpRequest();
request.open('POST', '/user', true);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};
const data = { name: 'John', age: 30 };
request.send(JSON.stringify(data));

在上面的代码中，我们向 /user 路径发送一个 POST 请求，请求体为 JSON 格式的对象。在请求头部分，我们需要设置 Content-Type 属性为 application/json;charset=UTF-8，表示请求体的类型为 JSON 格式，并且编码为 UTF-8。在发送请求之前，我们将数据通过 JSON.stringify() 方法转成 JSON 字符串，然后将其作为 send() 方法的参数发送给服务器。

总结

GET 和 POST 请求都是 HTTP 请求方法，它们之间的区别在于如何向服务器发送数据。GET 请求通过 URL 提交数据，适用于只读操作和获取数据。POST 请求通过请求体提交数据，适用于修改服务器状态和提交数据。在 Vanilla JavaScript 中，我们可以使用 XMLHttpRequest 对象来发送 GET 和 POST 请求，并通过回调函数处理服务器的响应。