JS 功能 AJAX 请求 - JavaScript

在现代 Web 应用程序中，AJAX（异步 JavaScript 和 XML）请求变得越来越重要。AJAX 允许您在不刷新页面的情况下向服务器发出请求和接收响应。在本文中，我们将学习在 JavaScript 中使用 AJAX 请求的方法以及如何处理响应。

AJAX 请求的基本步骤

1. 创建一个 XMLHttpRequest 对象。

   var xhttp = new XMLHttpRequest();
   

2. 创建一个回调函数来处理响应。

   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
       // 处理响应
     }
   };
   

   在 AJAX 请求过程中，XMLHttpRequest 对象会触发多个不同状态的事件。在本例中，我们使用 readyState 属性来检测是否已经收到了完整的响应。当 readyState 的值为 4 时，我们可以使用 status 属性来检查 HTTP 请求的状态码，例如 200 表示“成功”。

3. 发送请求。

   xhttp.open("GET", "url", true);
   xhttp.send();
   

   在这里，我们使用 open() 方法来指定 HTTP 请求的方法，URL 和是否使用异步请求。然后，我们可以使用 send() 方法将请求发送到服务器。

4. 处理响应。

   在回调函数中，在 readyState 为 4，状态码为 200 时，我们可以使用 responseText 属性来获取响应的内容。

AJAX 请求示例

假设我们要向服务器发出 GET 请求，并获取响应中的一些内容。我们可以将上面的基本步骤组合在一起来实现 AJAX 请求。以下是一个示例：

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

在这里，我们将向 https://api.example.com/data 发出 GET 请求。这个 URL 应该返回一个包含 JSON 数据的 HTTP 响应。在回调函数中，我们使用 JSON.parse() 方法来解析响应文本，然后打印数据到控制台上。

进一步阅读

本文章提供了非常基础的 AJAX 请求示例，如果你想更深入了解 AJAX，以下资源将对你有所帮助：

• MDN - XMLHttpRequest
• MDN - AJAX
• jQuery Ajax 文档