什么是AJAX？

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

想象一下：你在填写一个注册表单，输入用户名后，页面立即告诉你这个用户名是否可用，而不需要整个页面刷新。这就是AJAX的魔力！

核心优势： 提升用户体验，使网页更快速、更流畅

XMLHttpRequest对象是什么？

XMLHttpRequest（简称XHR）是实现AJAX技术的核心对象，它提供了在浏览器和服务器之间发送HTTP请求的能力。

简单理解： 把XHR看作是一个”邮递员”，它的工作流程是：

  1. 你告诉邮递员要发送什么请求（信件内容）
  2. 邮递员将请求发送到服务器（寄信）
  3. 邮递员等待服务器回信
  4. 收到回信后，邮递员把结果告诉你

这个”邮递员”的特殊之处在于：他工作时不会打扰你（不刷新页面），完成工作后才向你报告结果。

创建XMLHttpRequest对象

在不同浏览器中，创建方式略有差异，下面是标准的创建方式：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

注意： 对于老旧版本的Internet Explorer（IE6及更早），需要使用不同的方式创建：

// 兼容旧版IE的创建方式
if (window.XMLHttpRequest) {
  // 现代浏览器
  var xhr = new XMLHttpRequest();
} else {
  // 旧版IE (IE6及更早)
  var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}

不过现在大多数情况下，我们只需使用现代浏览器的创建方式，因为IE6等老旧浏览器已经很少使用。

XMLHttpRequest对象常用方法和属性

主要方法：

  • open(method, url, async) – 设置请求参数
  • send(data) – 发送请求
  • abort() – 取消当前请求
  • setRequestHeader(header, value) – 设置HTTP请求头

主要属性：

  • readyState – 请求状态（0到4的变化）
  • status – HTTP状态码（如200表示成功）
  • responseText – 服务器返回的文本数据
  • responseXML – 服务器返回的XML数据
  • onreadystatechange – 状态改变时的回调函数

readyState详解：

  • 0: 请求未初始化（XMLHttpRequest对象已创建）
  • 1: 服务器连接已建立（open方法已调用）
  • 2: 请求已接收（send方法已调用）
  • 3: 请求处理中（服务器正在处理请求）
  • 4: 请求已完成，响应已就绪

发送AJAX请求的完整步骤

下面是使用XHR对象发送请求的标准流程：

// 1. 创建XHR对象
var xhr = new XMLHttpRequest();

// 2. 设置回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求完成并且成功
    console.log(xhr.responseText);
  }
};

// 3. 打开连接（设置请求方法和URL）
xhr.open(“GET”, “https://api.example.com/data”, true);

// 4. 发送请求
xhr.send();

注意事项：

  • open()方法的第三个参数true表示异步请求（推荐方式）
  • GET请求的参数可以附加在URL上
  • POST请求需要设置请求头并发送数据体

完整示例：获取API数据

下面是一个实际可运行的示例，演示如何使用XHR获取JSONPlaceholder提供的模拟数据：

点击按钮获取模拟的用户数据：

响应将显示在这里…
document.getElementById(“getDataBtn”).addEventListener(“click”, function() {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var users = JSON.parse(xhr.responseText);
        var html = “<h3>用户列表：</h3>”;
        users.forEach(function(user) {
          html += `<div class=”user”>${user.name} – ${user.email}</div>`;
        });
        document.getElementById(“responseContainer”).innerHTML = html;
      } else {
        document.getElementById(“responseContainer”).innerHTML = “请求失败，状态码: “ + xhr.status;
      }
    }
  };

  xhr.open(“GET”, “https://jsonplaceholder.typicode.com/users”, true);
  xhr.send();
});