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]]