什么是AJAX？如何使用AJAX实现异步数据传输？

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术。它允许网页向服务器发送异步请求，而不会打断用户的操作。这些请求通常使用JavaScript发送，并且可以接收服务器返回的数据，然后用JavaScript更新网页，而不需要刷新页面。

以下是使用AJAX发送异步请求并接收数据的基本步骤：

1. 创建一个新的XMLHttpRequest对象。
2. 配置请求，包括请求的方法（GET, POST等）和URL。
3. 设置请求状态变化的回调函数。
4. 发送请求。
5. 在回调函数中处理服务器的响应。

示例代码：

// 创建新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求
var method = 'GET';
var url = 'https://api.example.com/data';
 
// 打开连接
xhr.open(method, url, true);
 
// 设置回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态为200
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器返回的数据
    var data = JSON.parse(xhr.responseText);
    // 更新页面
    document.getElementById('result').innerHTML = data.someProperty;
  }
};
 
// 发送请求
xhr.send();

在现代的前端开发中，由于AJAX的复杂性和Promise的出现，建议使用Fetch API来代替XMLHttpRequest。Fetch API使用Promise，使得异步代码更加简洁易懂。

使用Fetch API的基本步骤：

1. 使用fetch函数发送请求。
2. 使用then方法处理响应。
3. 使用catch方法处理错误。

示例代码：

// 发送GET请求
fetch('https://api.example.com/data')
  .then(response => response.json()) // 解析JSON响应数据
  .then(data => {
    // 处理数据
    document.getElementById('result').innerHTML = data.someProperty;
  })
  .catch(error => {
    // 错误处理
    console.error('Error:', error);
  });

以上两种方式都可以实现AJAX的功能，使用Fetch API是现代前端开发的推荐做法。