JavaWeb从0到1-DAY4-AJAX

Java AJAX 与 Vue 异步请求学习笔记

一、这一章在讲什么

这一章主要讲浏览器如何通过 AJAX 和服务器进行数据交换。AJAX 的核心作用是：页面不用整体刷新，也能向服务器发送请求并更新局部数据。课程中又引入了 Axios，它是对原生 AJAX 的封装，写起来更简单。后半部分结合 Vue，讲了如何用 async/await 简化异步请求，以及在 mounted() 生命周期钩子中加载页面数据。

二、核心概念

1. AJAX

它是什么
- AJAX 全称是 Asynchronous JavaScript And XML，意思是异步的 JavaScript 和 XML。
- 它不是一门新语言，而是一种浏览器和服务器异步通信的技术。
有什么作用（为什么引入这个概念？）
- 用来让浏览器在不刷新整个页面的情况下，向服务器发送请求、获取数据、更新页面局部内容。
- 例如：搜索联想、用户名是否可用校验、员工列表加载等。
它的原理（怎么实现的？）
- 浏览器通过 JavaScript 向服务器发送请求。
- 服务器处理请求后返回数据。
- 浏览器拿到数据后，用 JavaScript 更新页面中的某一部分。
初学者容易混淆的点
- AJAX 不是新的编程语言。
- AJAX 名字里有 XML，但现在实际开发中更常用 JSON 传递数据。
- AJAX 的重点是"异步交互"和"局部更新"。

2. 同步与异步

它是什么
- 同步：发送请求后，必须等服务器返回结果，才能继续执行后面的操作。
- 异步：发送请求后，不需要一直等待，可以继续做其他事情，结果回来后再处理。
有什么作用（为什么引入这个概念？）
- 异步可以提高页面体验，避免用户每次操作都要等待整个页面刷新。
它的原理（怎么实现的？）
- JavaScript 发出请求后，把"请求成功后要做什么"交给回调函数、then() 或 await 后面的代码处理。
- 请求过程中，页面不会整体刷新。
初学者容易混淆的点
- 异步不是"不等结果"，而是"不阻塞整个页面地等结果"。
- await 会等待结果，但不会把 AJAX 变成真正的同步请求。

3. Axios

它是什么
- Axios 是一个对原生 AJAX 进行封装的工具库。
有什么作用（为什么引入这个概念？）
- 原生 AJAX 写法比较复杂，Axios 可以简化请求代码，提高开发效率。
它的原理（怎么实现的？）
- Axios 内部帮我们完成创建请求对象、发送请求、接收响应、处理成功和失败等过程。
- 开发者只需要关心请求地址、请求方式、请求参数和响应结果。
初学者容易混淆的点
- Axios 不是后端技术，它运行在前端浏览器中。
- Axios 本质上还是发送异步请求。
- 请求成功后拿到的 result 不是最终业务数据，通常要看 result.data 或 result.data.data。

4. `then()` 和 `catch()`

它是什么
- then() 是请求成功后的回调函数。
- catch() 是请求失败后的回调函数。
有什么作用（为什么引入这个概念？）
- 用来分别处理请求成功和请求失败两种情况。
它的原理（怎么实现的？）
- Axios 请求返回的是一个异步结果。
- 请求成功时执行 then()。
- 请求失败时执行 catch()。
初学者容易混淆的点
- then() 不是马上执行，而是请求成功后才执行。
- catch() 不是语法错误才执行，网络失败、接口报错、请求地址错误等都可能进入 catch()。

5. `params` 和 `data`

它是什么
- params：请求 URL 后面的参数，常用于 GET 请求。
- data：请求体中的数据，常用于 POST 请求。
有什么作用（为什么引入这个概念？）
- 用来向服务器传递查询条件或提交数据。
它的原理（怎么实现的？）
- params 会被拼接到 URL 后面，例如 /emps/list?name=Tom&gender=1。
- data 会放在请求体中提交给服务器。
初学者容易混淆的点
- GET 请求常用 params。
- POST 请求常用 data。
- 不是所有参数都直接写到 URL 字符串里，Axios 可以帮我们处理。

6. `async` 和 `await`

它是什么
- async 用来声明一个异步函数。
- await 用来等待一个异步任务完成。
有什么作用（为什么引入这个概念？）
- 让异步代码写起来更像同步代码，可读性更强，后期更好维护。
它的原理（怎么实现的？）
- 遇到 await axios.get(...) 时，会等待请求结果返回，再继续执行下一行代码。
- 当前异步函数会等待，但整个页面不会因此整体刷新或完全卡死。
初学者容易混淆的点
- await 只能写在 async 函数中。
- await 不是把请求变成同步请求，只是让代码书写顺序更像同步。

7. Vue 生命周期

它是什么
- 生命周期指一个 Vue 组件或 Vue 页面从创建到销毁的整个过程。
有什么作用（为什么引入这个概念？）
- Vue 在不同阶段会自动执行对应的生命周期钩子函数，让我们可以在合适的时机写代码。
它的原理（怎么实现的？）
- Vue 组件经历创建、挂载、更新、销毁几个阶段。
- 每到一个关键阶段，Vue 会自动调用对应的钩子函数。
初学者容易混淆的点
- 生命周期不是手动调用的普通方法，而是 Vue 到了某个阶段自动执行的函数。
- mounted() 表示页面结构已经挂载完成，常用于页面加载完成后发送请求。

8. `mounted()`

它是什么
- mounted() 是 Vue 生命周期中的一个钩子函数，表示挂载完成。
有什么作用（为什么引入这个概念？）
- 常用于页面一加载完成就自动执行某些操作，比如请求服务器数据。
它的原理（怎么实现的？）
- Vue 把组件内容挂载到页面上之后，会自动执行 mounted()。
- 在 mounted() 中请求数据，数据回来后赋值给响应式变量，页面会自动重新渲染。
初学者容易混淆的点
- 页面加载就查数据，适合写在 mounted()。
- 用户点击按钮后才查数据，应该写在 methods 的方法中。

三、重难点

1. AJAX 的核心是"不刷新页面也能交换数据"

结论
- AJAX 可以让页面不用整体刷新，就能向服务器请求数据并更新局部内容。
原因
- 浏览器通过 JavaScript 在后台发送请求，服务器返回数据后，前端只更新需要变化的部分。
比喻
- 传统刷新页面像"整张试卷重写一遍"；AJAX 像"只把错题改掉"，其他内容不用动。

2. 同步和异步的区别在于是否阻塞等待

结论
- 同步请求要等结果回来才能继续；异步请求发出后，可以继续做其他操作，结果回来后再处理。
原因
- 异步请求把后续处理逻辑放到回调、then() 或 await 后面的流程中。
比喻
- 同步像在窗口办业务，必须站着等办完。
- 异步像点外卖，下单后可以继续学习，外卖到了再处理。

3. Axios 是对 AJAX 的简化封装

结论
- 实际开发中通常用 Axios，而不是手写原生 AJAX。
原因
- Axios 把复杂的请求步骤封装好了，只需要写请求方式、地址和参数。
比喻
- 原生 AJAX 像自己从零组装电脑，Axios 像直接使用组装好的电脑。

4. `result.data.data` 才常常是真正业务数据

结论
- Axios 请求成功后，result 是完整响应对象，真正要渲染的数据通常在 result.data.data。
原因
- Axios 返回对象里包含状态码、响应头、配置、响应体等信息，后端业务数据只是其中一部分。
例子
- result 像一个快递包裹。
- result.data 像包裹里面的盒子。
- result.data.data 才可能是盒子里真正要用的商品。

5. `await` 等结果，但请求本质仍然是异步

结论
- await axios.get() 不能说成同步请求，它仍然是异步请求，只是写法像同步。
原因
- await 只是让当前 async 函数等待请求结果，浏览器页面不会整体刷新。
比喻
- await 像"等快递送到再拆包"，不是"整个世界都停下来等快递"。

6. 页面加载后自动请求数据，常写在 `mounted()`

结论
- 如果页面一打开就要加载数据，通常把请求写在 mounted() 中。
原因
- mounted() 表示 Vue 已经把页面结构挂载到浏览器中，此时适合请求数据并渲染页面。
例子
- 员工管理页面打开后，表格一开始没有数据。
- mounted() 自动执行请求。
- 数据回来后赋值给 employees。
- Vue 自动把员工列表渲染到表格中。

四、代码理解

1. 引入 Axios

html 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

这行代码的作用是引入 Axios 工具库。引入后，页面中就可以使用 axios 发送请求。

2. Axios 基本写法

javascript 复制代码

axios({
  method: 'GET',
  url: 'https://web-server.itheima.net/emps/list'
}).then((result) => {
  console.log(result.data);
}).catch((err) => {
  console.log(err);
});

关键理解：

method: 'GET'：请求方式是 GET。
url：请求地址。
then()：请求成功后执行。
result.data：服务器响应体数据。
catch()：请求失败后执行。

3. Axios 请求方式别名

javascript 复制代码

axios.get('https://web-server.itheima.net/emps/list')
  .then((result) => {
    console.log(result.data);
  })
  .catch((err) => {
    console.log(err);
  });

axios.get(url) 是 GET 请求的简化写法，比完整配置对象更常用。

javascript 复制代码

axios.post('https://web-server.itheima.net/emps/update', 'id=1')
  .then((result) => {
    console.log(result.data);
  })
  .catch((err) => {
    console.log(err);
  });

axios.post(url, data) 一般用于向服务器提交数据。

4. 使用 `async/await` 简化请求

javascript 复制代码

async search() {
  let result = await axios.get('https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx');
  this.employees = result.data.data;
}

执行过程：

async search() 表示这是一个异步方法。
await axios.get(...) 发送异步请求，并等待请求结果。
请求成功后，把响应结果保存到 result。
result.data.data 取出真正的员工列表。
this.employees = result.data.data 把数据交给 Vue 渲染页面。

语法规则：

javascript 复制代码

async 函数名() {
  let result = await 异步任务;
}

注意：await 只能写在 async 函数中。

5. Vue 生命周期中的 `mounted()`

javascript 复制代码

const app = createApp({
  data() {
    return {
      employees: []
    }
  },
  async mounted() {
    let result = await axios.get('https://web-server.itheima.net/emps/list');
    this.employees = result.data.data;
  }
}).mount('#app');

关键理解：

employees: []：先准备一个空数组，用来保存员工数据。
mounted()：页面挂载完成后自动执行。
async mounted()：说明这个生命周期方法里可以使用 await。
axios.get(...)：向后端请求员工列表。
this.employees = result.data.data：把后端返回的数据赋值给 Vue 数据变量。
数据变化后，Vue 会自动重新渲染页面。

完整链路：

text 复制代码

页面打开
  ↓
Vue 挂载完成
  ↓
自动执行 mounted()
  ↓
Axios 发送异步请求
  ↓
await 等待请求结果
  ↓
取出 result.data.data
  ↓
赋值给 employees
  ↓
页面自动更新

五、易错点

把 AJAX 当成一门新语言
- AJAX 不是语言，而是浏览器异步请求服务器数据的一种技术。
认为 await 会把异步请求变成同步请求
- await 只是让代码写法像同步，本质还是异步请求。
忘记 await 必须写在 async 函数中
- 错误：mounted() { let result = await axios.get(url); }
- 正确：async mounted() { let result = await axios.get(url); }
直接使用 result 当作业务数据
- result 是 Axios 的完整响应对象。
- 真正数据通常是 result.data 或 result.data.data。
分不清请求写在 mounted() 还是 methods 中
- 页面加载就自动请求：写在 mounted()。
- 点击按钮后才请求：写在 methods 的方法中。

六、记忆口诀 / 通俗比喻

AJAX：页面不刷新，后台要数据。
Axios：帮 AJAX 简化写法。
then()：成功后做什么。
catch()：失败后怎么办。
params：跟在 URL 后面。
data：放在请求体里面。
async：声明异步函数。
await：等结果再往下走。
mounted()：页面挂好后自动执行。

通俗比喻：

AJAX 像"偷偷派人去服务器取数据"，页面不用重新开一遍。
Axios 像"快递员"，帮我们把请求送到服务器，再把响应带回来。
await 像"等快递送到再拆包"，但不是让整个页面都停止。
mounted() 像"店铺开门完成"，开门后就可以自动去仓库取商品并摆到货架上。

七、应用

在实际开发中，AJAX 和 Axios 经常用于前后端数据交互。比如员工管理系统中，页面打开时需要展示员工列表，就可以在 Vue 的 mounted() 中发送 Axios 请求，拿到后端返回的员工数据后赋值给 employees，页面表格会自动渲染出来。如果用户点击"搜索"按钮，根据姓名、性别、职位筛选员工，则应该把请求写在 methods 中的 search() 方法里，由按钮点击事件触发。这样页面既不用整体刷新，又能根据用户操作实时更新数据。

八、最终总结

AJAX 的核心是让浏览器在不刷新整个页面的情况下和服务器交换数据。Axios 是对 AJAX 的封装，让发送 GET、POST 请求更简单。async/await 可以让异步请求代码更清晰，但请求本质仍然是异步。Vue 的 mounted() 会在页面挂载完成后自动执行，常用于页面加载时请求数据并渲染页面。记住完整流程：mounted() 触发请求，await 等待结果，取出 result.data.data，赋值给 Vue 数据，页面自动更新。

JavaWeb从0到1-DAY4-AJAX

Java AJAX 与 Vue 异步请求学习笔记

一、这一章在讲什么

二、核心概念

1. AJAX

2. 同步与异步

3. Axios

4. then() 和 catch()

5. params 和 data

6. async 和 await

7. Vue 生命周期

8. mounted()

三、重难点

1. AJAX 的核心是"不刷新页面也能交换数据"

2. 同步和异步的区别在于是否阻塞等待

3. Axios 是对 AJAX 的简化封装

4. result.data.data 才常常是真正业务数据

5. await 等结果，但请求本质仍然是异步

6. 页面加载后自动请求数据，常写在 mounted()

四、代码理解

1. 引入 Axios

2. Axios 基本写法

3. Axios 请求方式别名

4. 使用 async/await 简化请求

5. Vue 生命周期中的 mounted()

五、易错点

六、记忆口诀 / 通俗比喻

七、应用

八、最终总结

4. `then()` 和 `catch()`

5. `params` 和 `data`

6. `async` 和 `await`

8. `mounted()`

4. `result.data.data` 才常常是真正业务数据

5. `await` 等结果，但请求本质仍然是异步

6. 页面加载后自动请求数据，常写在 `mounted()`

4. 使用 `async/await` 简化请求

5. Vue 生命周期中的 `mounted()`