一、什么是 Ajax？

Ajax（Asynchronous JavaScript and XML）是一种无需重新加载整个网页，就能与服务器交换数据并更新页面部分内容的技术。

✅ 关键词：异步交互、局部刷新、数据交换

二、Ajax 的作用

  • 数据交换：向服务器发送请求，获取响应数据。
  • 异步交互：不刷新整个页面的情况下更新内容。
  • 提升体验：用户操作流畅，如搜索建议、动态加载列表、表单验证等。

三、同步与异步的区别

类型 描述
同步 客户端请求后，必须等待服务器响应才能继续后续操作。
异步 客户端发送请求后，不等待服务器响应，可继续执行其他任务，等响应回来再处理。

举个例子：

  • 同步：打电话等人接听才能继续。
  • 异步：发消息可以干别的，回复再处理。

四、Ajax 的实现方式

✅ 原生方式：XMLHttpRequest

传统的 Ajax 写法，繁琐但基本原理重要。

1
2
3
4
5
6
7
8
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

五、现代方式：Axios（推荐）

Axios —— 一个对原生 Ajax 封装的第三方库，使用更简单，支持 Promise、兼容性更好。

基本使用步骤

  1. 引入 Axios（CDN 或 npm 安装）

    1
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  2. 发送 GET 请求

    1
    2
    3
    4
    5
    6
    7
    axios.get('https://api.example.com/list')
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.error(err);
      });

  3. 发送 POST 请求

    1
    2
    3
    axios.post('https://api.example.com/add', { name: 'Tom' })
      .then(res => console.log(res))
      .catch(err => console.error(err));

六、Axios 请求参数说明

参数 说明
method 请求方式，如 GET、POST
url 请求地址
params URL 查询参数（GET 用）
data 请求体参数（POST 用）
headers 自定义请求头信息

七、Axios 请求方式别名（推荐）

Axios 为常用请求提供了简洁别名形式：

1
2
3
4
axios.get(url, config)
axios.post(url, data, config)
axios.put(url, data, config)
axios.delete(url, config)

八、结合 Vue 使用 Ajax

在 Vue 项目中，常在页面加载完成时发起 Ajax 请求。

示例：

1
2
3
4
5
6
mounted() {
  axios.get('https://web-server.itheima.net/emps/list')
    .then(res => {
      this.emps = res.data.data;
    });
}

利用 Vue 的 生命周期钩子函数，如 mounted()，可以实现在页面加载完毕后自动请求数据。

九、使用 async / await（语法更优雅）

1
2
3
4
5
6
7
8
async function getData() {
  try {
    const res = await axios.get('/api/data');
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
}

✅ 优点：

  • 可读性强
  • 结构清晰，适合复杂逻辑

总结一句话：

Ajax 是前端与服务器之间沟通的桥梁，Axios 是这座桥的高速通道。