---
title: Ajax、组件库与页面集成
tags:
  - module
  - frontend
  - ajax
  - component
  - joplin
type: module
source_type: reconstructed
created: 2026-04-23
updated: 2026-04-23
---

# Ajax、组件库与页面集成

> [!abstract]
> 这一模块处理前端“如何接上后端、如何做局部更新、如何借助组件库快速组织页面”的问题。

## 模块结论

- [[Ajax]] 让前端可以不刷新整页就与后端交换数据。
- [[Axios]] 是对原生 Ajax 的封装，降低了请求代码复杂度。
- [[ElementUI]] 代表组件库思路：把常见界面模式封装成可复用组件。
- 前端页面真正进入业务开发，通常就从“组件 + 异步接口”开始。

## 一、Ajax 在解决什么问题

- 前端和后端是两个独立程序
- 页面数据通常不可能全部写死在 HTML 中
- 前端必须通过异步请求向后端拿数据

## 二、同步与异步的差异

- 同步：请求发出后页面等待响应
- 异步：请求发出后页面仍可继续交互

前端体验升级的关键，就是把页面刷新方式从“整页阻塞”改为“局部异步更新”。

## 三、为什么 Axios 常常替代原生 Ajax

- 原生 `XMLHttpRequest` 能力完整，但写法繁琐
- Axios 对请求方式、参数、响应处理进行了统一封装
- 更适合工程项目中的接口调用

## 四、组件库的价值

- 常用表单、表格、按钮、弹窗等界面模式可以直接复用
- 能让页面开发效率显著提升
- 也让页面风格更统一

### 复习时应注意

- 组件库不是前端基础的替代品
- 它建立在 HTML、CSS、JavaScript、Vue 之上

## 五、页面集成的典型链路

- Vue 组织页面状态
- Axios 请求后台数据
- ElementUI 承载页面组件
- 页面完成局部更新

## 六、易错点

- 只会发请求，不理解异步交互的页面意义。
- 把 Axios 当作“新的语法”，而不是 Ajax 封装。
- 过度依赖组件库，不理解基础结构和交互逻辑。

## 七、复习提问

- Ajax 最核心地改变了页面的什么行为？
- Axios 相对原生 Ajax 主要简化了什么？
- 组件库为什么能提升业务页面开发效率？

## 来源

- [[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/3.Vue_Element.md]]

## 相关页面

- [[前端与工程化]]
- [[Ajax]]
- [[Axios]]
- [[ElementUI]]