如何使用 JavaScript 获取查询数据

在 Web 应用程序中，通常都会存在查询数据并进行相应操作的情况。而 JavaScript 是一门常用于 Web 开发的编程语言，它可以很容易地帮助我们获取查询数据。本篇文章将介绍如何使用 JavaScript 获取查询数据。

XMLHttpRequest

XMLHttpRequest 是一个内置对象，用于与服务器进行交互，从而获取数据。它支持异步和同步方式。以下是使用 XMLHttpRequest 获取数据的示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error!');
    }
  }
};
xhr.send();

在以上示例中，我们首先创建了一个 XMLHttpRequest 对象，然后请求指定的 URL（此处使用的是 JSONPlaceholder 提供的 API），并设定回调函数处理响应数据。当数据准备就绪时，回调函数会被调用。

Fetch API

Fetch API 也是用于获取网络资源的一个接口，它是基于 Promise 设计的，更加灵活方便。以下是使用 Fetch API 获取数据的示例：

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在以上示例中，我们首先使用 fetch 函数发送请求，然后通过 Promise 处理响应数据（此处使用了箭头函数和链式语法）。当数据准备就绪时，Promise 对象会被解析并返回响应数据，反之则会捕获异常并抛出错误信息。

值得注意的是，在使用 Fetch API 时，我们需要对响应的数据类型进行解析。如上述示例中的 .json() 就是解析 JSON 格式的数据。

Axios

Axios 是一个流行的 JavaScript 库，用于发出 HTTP 请求，它已经被广泛应用于前端开发中。以下是使用 Axios 获取数据的示例：

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

在以上示例中，我们首先使用 axios.get 函数发送 GET 请求，然后使用 Promise 处理响应数据。当数据准备就绪时，Promise 对象会被解析并返回响应数据，反之则会捕获异常并抛出错误信息。

总结

以上就是使用 JavaScript 获取查询数据的几种方式。无论是 XMLHttpRequest、Fetch API 还是 Axios，它们都非常方便易用，您可以根据实际需求选择最适合您的方式。

代码片段说明：以上示例代码均以原生 JS 的方式展示，因此需要引入相关依赖（如 Axios 库）。不过这里只针对获取数据的核心代码进行演示，方便读者理解。