什么是AJAX？

AJAX全称是Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的技术。

大白话解释：

想象你在餐厅点餐：

• 传统方式：点完菜后必须等待厨师做完所有菜才能上桌（页面需要完全刷新）
• AJAX方式：服务员（AJAX）可以单独为你上每道做好的菜，无需等待所有菜都完成（局部更新）

核心特点：

• 异步：发送请求后不需要等待，浏览器可以继续做其他事情
• 局部更新：只更新页面的一部分，而不是整个页面刷新
• 后台通信：在用户无感知的情况下与服务器交换数据

AJAX工作原理

AJAX的核心是浏览器内置的XMLHttpRequest对象（简称XHR）。

工作流程：

1. 创建XHR对象：let xhr = new XMLHttpRequest();
2. 设置请求：xhr.open('GET', 'url', true);（true表示异步）
3. 设置回调函数：xhr.onreadystatechange = function() { ... }
4. 发送请求：xhr.send();
5. 处理响应：在回调函数中处理服务器返回的数据

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status === 200) { // 服务器响应成功
            let data = JSON.parse(xhr.responseText);
            // 处理数据并更新页面
        } else {
            // 处理错误
        }
    }
};

xhr.send();

理解服务器响应

服务器响应是AJAX流程中最关键的部分，它包含两个核心属性：

1. readyState – 请求状态

表示请求/响应过程的当前状态：

• 0：未初始化（还没调用open方法）
• 1：已建立连接（已调用open但还没send）
• 2：已发送请求（已调用send，等待响应）
• 3：接收中（服务器返回部分数据）
• 4：完成（所有数据接收完毕）

我们通常只关心状态4（完成状态）

2. status – HTTP状态码

服务器返回的HTTP状态码，表示请求的处理结果：

• 200：成功（OK）
• 201：已创建（Created）
• 400：客户端请求错误（Bad Request）
• 401：未授权（Unauthorized）
• 403：禁止访问（Forbidden）
• 404：未找到（Not Found）
• 500：服务器内部错误（Internal Server Error）

处理响应数据

服务器返回的数据可以通过XHR对象的属性获取：

主要属性：

• responseText：获取字符串形式的响应数据（最常用）
• responseXML：获取XML格式的响应数据（如果服务器返回的是XML）
• status：HTTP状态码（如200）
• statusText：HTTP状态文本（如”OK”）

数据格式：

现代应用中最常用的数据格式是JSON：

// 服务器返回的JSON字符串
'{"name": "张三", "age": 28, "city": "北京"}'

// 使用JSON.parse转换为JavaScript对象
let user = JSON.parse(xhr.responseText);
console.log(user.name); // 输出: 张三

处理响应示例：

if (xhr.readyState === 4) {
    if (xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);
        
        // 更新页面元素
        document.getElementById('result').innerHTML = 
            `姓名: ${response.name}, 年龄: ${response.age}`;
    } else {
        // 显示错误信息
        document.getElementById('error').innerHTML = 
            `请求失败: ${xhr.status} - ${xhr.statusText}`;
    }
}

错误处理

AJAX请求可能因为多种原因失败，良好的错误处理至关重要。

常见错误类型：

• 网络错误：用户网络中断，服务器不可达
• 超时错误：请求时间过长
• 服务器错误：服务器返回4xx或5xx状态码
• 跨域错误：浏览器安全策略阻止跨域请求
• 数据解析错误：返回的数据格式不正确

错误处理策略：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 成功处理
        } else {
            // 处理HTTP错误
            console.error(`HTTP错误: ${xhr.status}`);
        }
    }
};

// 处理网络错误
xhr.onerror = function() {
    console.error("网络请求失败");
};

// 设置超时处理
xhr.ontimeout = function() {
    console.error("请求超时");
};
xhr.timeout = 5000; // 5秒超时

现代替代方案：Fetch API

Fetch API是更现代、更强大的替代方案，使用Promise处理异步操作。

基本用法：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }
        return response.json(); // 解析JSON数据
    })
    .then(data => {
        // 使用数据
        console.log(data);
    })
    .catch(error => {
        // 处理错误
        console.error('请求失败:', error);
    });

Fetch vs XHR：

• 语法更简洁，基于Promise
• 默认不发送/接收cookies（需要配置credentials）
• 错误处理方式不同（不会因为HTTP错误状态码reject）
• 不支持超时取消（需要使用AbortController）