XML HTTP Request 学习笔记

XML HTTP Request 是浏览器中向服务器发送 HTTP 请求并获取响应的常用方法。它基于 AJAX 技术，能够异步地请求数据并实现无刷新页面更新。

创建一个 XML HTTP Request 对象

在 JavaScript 中，我们可以使用以下代码来创建一个 XML HTTP Request 对象：

javascriptCopy Code
var xhr = new XMLHttpRequest();

发送一个 GET 请求并获取响应

使用 XML HTTP Request 对象可以轻松地发送 HTTP 请求并获取响应。以下是一个发送 GET 请求并处理响应的示例：

javascriptCopy Code
var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

上面的代码会向 https://jsonplaceholder.typicode.com/todos/1 发送一个 GET 请求，并在响应到达时输出响应体。

发送一个 POST 请求并获取响应

除了 GET 请求外，我们还可以发送 POST 请求。以下是一个发送 POST 请求并处理响应的示例：

javascriptCopy Code
var xhr = new XMLHttpRequest();

xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 201) {
    console.log(xhr.responseText);
  }
};

var data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});

xhr.send(data);

上面的代码会向 https://jsonplaceholder.typicode.com/posts 发送一个 JSON 格式的 POST 请求，并在响应到达时输出响应体。

总结

通过学习本文档，我们了解了 XML HTTP Request 对象的基本使用，并学会了如何发送 GET 请求和 POST 请求。使用 XML HTTP Request 对象可以轻松地异步请求数据并更新页面，是现代 Web 开发中不可或缺的一部分。