面试官: “ 请你说一下什么是 ajax ? ”

一、AJAX 核心定义

AJAX 是 Asynchronous JavaScript and XML 的缩写，翻译为 "异步的 JavaScript 和 XML"。

本质：它不是一种新的编程语言，而是一套使用现有技术组合实现的编程方案。
核心作用：让 JavaScript 在不刷新整个网页的情况下，异步地与服务器交换数据，实现网页局部更新。
关键特点：异步（请求发送后，页面不用等待服务器响应，仍可正常交互）、局部更新（只更新需要变化的部分，提升用户体验）。

补充：虽然名字里有 XML，但现在实际开发中几乎都用JSON（更轻量、易解析）来传输数据，AJAX 只是沿用了历史名称。

二、AJAX 工作原理

AJAX 的核心是浏览器提供的 XMLHttpRequest 对象（简称 XHR），现代浏览器也提供了更易用的 fetch API。其基本工作流程如下：

创建 AJAX 请求对象（XHR/fetch）；
配置请求参数（请求方式、URL、是否异步等）；
发送请求到服务器；
监听服务器响应状态；
接收服务器返回的数据；
用 JavaScript 更新网页局部内容。

三、AJAX 代码示例

1. 传统 XHR 方式（兼容所有浏览器）

javascript 复制代码

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

// 2. 配置请求：请求方式(GET)、URL、是否异步(true)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

// 3. 监听请求状态变化（核心）
xhr.onreadystatechange = function() {
    // readyState=4 表示请求完成；status=200 表示响应成功
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4. 解析服务器返回的JSON数据
        const data = JSON.parse(xhr.responseText);
        // 5. 局部更新页面（比如把数据显示到id为result的元素里）
        document.getElementById('result').innerHTML = `
            <h3>任务标题：${data.title}</h3>
            <p>是否完成：${data.completed ? '是' : '否'}</p>
        `;
    }
};

// 处理请求失败的情况
xhr.onerror = function() {
    document.getElementById('result').innerHTML = '请求失败！';
};

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

2. 现代 fetch 方式（ES6+，更简洁）

fetch 是 AJAX 的现代替代方案，基于 Promise，语法更优雅：

typescript 复制代码

// 1. 发送GET请求
fetch('https://jsonplaceholder.typicode.com/todos/1')
    // 2. 处理响应：先判断是否成功，再解析为JSON
    .then(response => {
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        return response.json();
    })
    // 3. 使用数据更新页面
    .then(data => {
        document.getElementById('result').innerHTML = `
            <h3>任务标题：${data.title}</h3>
            <p>是否完成：${data.completed ? '是' : '否'}</p>
        `;
    })
    // 4. 捕获异常
    .catch(error => {
        document.getElementById('result').innerHTML = error.message;
    });

四、AJAX 的典型应用场景

表单提交（比如登录验证，不用刷新页面就能提示 "用户名密码错误"）；
数据分页加载（比如滚动到底部自动加载下一页内容）；
搜索框联想（输入关键词实时显示匹配结果）；
局部数据刷新（比如网页的点赞、评论功能，点击后直接更新数字）。

五、关键注意点

同源策略 ：浏览器默认限制 AJAX 请求只能访问同域名、同端口、同协议 的服务器（比如http://localhost:8080不能请求http://baidu.com），跨域需要服务器配置 CORS 或使用代理。
异步特性 ：AJAX 请求是异步的，不能在请求发送后立即获取结果，必须在回调函数（onreadystatechange）或 Promise 的then里处理返回数据。

总结

AJAX 是一套实现 "网页异步请求数据、局部更新" 的技术方案，核心是XMLHttpRequest对象（或现代的fetch）。
核心优势：无需刷新整个页面，提升用户体验，实现网页与服务器的异步数据交互。
现代开发中，fetch（结合 Promise/async-await）已逐步替代传统 XHR，是 AJAX 的主流实现方式。