从 JSON 占位符获取数据 - JavaScript

在开发 Web 应用程序时，我们经常需要获取数据。而获取数据的一种常用方式是使用 JSON 占位符（JSON Placeholder）。JSON Placeholder 提供了测试和演示用的 RESTful API，可以返回假数据。

在 JavaScript 中，通过 XMLHttpRequest 对象或 fetch() 函数可以向 JSON Placeholder 发送 HTTP 请求，获取数据返回后再进行处理。

使用 XMLHttpRequest 对象获取数据

使用 XMLHttpRequest 对象获取数据的步骤如下：

1. 创建 XMLHttpRequest 对象。
2. 使用 open() 方法指定请求方式、请求 URL。
3. 使用 send() 方法发送请求。
4. 监听 XMLHttpRequest 对象的 readyState 变化和状态码变化。
5. 在状态码为 200（成功）的情况下，使用 responseText 或 responseXML 属性获取返回数据。
6. 对返回数据进行解析和处理。

示例代码如下：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    console.log(data);
  }
};
xmlhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xmlhttp.send();

上述示例代码使用 XMLHttpRequest 对象向 JSON Placeholder 发送 GET 请求，并在成功后使用 JSON.parse() 方法解析返回数据，并将其打印到控制台中。

使用 fetch() 函数获取数据

使用 fetch() 函数获取数据的步骤如下：

1. 使用 fetch() 函数指定请求 URL。
2. 使用 then() 方法处理返回的响应对象，并使用 json() 方法解析返回数据。
3. 对返回数据进行处理。

示例代码如下：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

上述示例代码中，fetch() 函数返回一个 Promise 对象，使用 then() 方法处理返回的响应对象，并使用 json() 方法解析返回数据，并将其打印到控制台中。

总结

通过以上介绍，可以看出使用 XMLHttpRequest 对象和 fetch() 函数都可以从 JSON Placeholder 占位符获取数据。在实际开发中，选择使用哪种方式获取数据取决于具体的开发场景和需求。