AJAX和Axios理解和关系

问得好很多初学者会被这两个词搞晕。简单直接的结论是AJAX 是一套“技术方案理念”而 Axios 是实现这套方案的“最强工具”。如果你把“在网页上不刷新页面就能获取数据”比作**“点外卖”**AJAX就是“点外卖”这个行为的概念。Axios就是你手机里的“美团”或“饿了么” App。1. AJAX 到底是什么 (The Concept)AJAX全称是Asynchronous JavaScript and XML异步的 JavaScript 和 XML。在它出现之前网页想换个数据必须全量刷新整个页面白一下再出来。AJAX 的出现让网页可以“偷偷地”去服务器拿数据拿回来后只更新页面的一小块地方。关键点它不是一个具体的软件而是一种统称。底层传统的 AJAX 主要是靠浏览器自带的一个叫XMLHttpRequest(XHR) 的对象来实现的。但那个对象的代码写起来非常恶心、繁琐。2. Axios 又是什么 (The Tool)Axios是目前前端最流行的、基于Promise的 HTTP 库。它本质上是对底层 AJAX 技术XHR的高级封装。它之所以火是因为它解决了原生 AJAX 的很多痛点自动转换它会自动帮你把 JSON 字符串转成 Java 对象反之亦然。拦截器就像保安一样你可以在请求发出去前统一加个 Token或者在数据回来后统一处理错误。语法简洁支持async/await代码读起来像人话。双向支持它既能在浏览器跑用 XHR也能在 Node.js 环境跑。3. 三代“取数”工具的进化史为了让你有系统的认识看这个对比表阶段工具名称评价现状石器时代XMLHttpRequest原生 AJAX。代码又臭又长回调地狱。基本没人直接写了。铁器时代jQuery AJAX曾经的霸主。简化了代码但依赖整个 jQuery 库。随 jQuery 一起淡出。现代官方版Fetch API浏览器原生支持。基于 Promise但功能太基础得自己写很多逻辑。简单项目会用。现代工业级Axios全能选手。功能强大、生态好、容错性高。目前的行业标准。4. 为什么你学 Spring Boot 必须掌握 Axios当你用 Spring Boot 写好一个RestController接口后它会返回一串JSON数据。这时候前端Vue 或 React就要派 Axios 上场了Axios 敲响后端的门发送 HTTP 请求。Spring Boot 把数据打包成 JSON 给 Axios。Axios 拿到数据自动解包交给 Vue 渲染到页面上。 按照你的“检测法”今日记忆闭环既然你追求“当天记牢”请尝试完成这个费曼复述检测1. 深度提问模拟面试问题“既然浏览器已经自带了fetch原生取数方法我们为什么还要在项目中安装 Axios 插件”你的回答核心点 * Axios 兼容性更好旧浏览器支持。Axios 拥有强大的拦截器 (Interceptors)功能方便统一处理 Token。Axios 自动转换 JSON不需要像fetch那样手动执行.json()转换。2. Anki 卡片建议正面AJAX 与 Axios 的关系是什么背面AJAX 是异步请求技术的总称Axios 是实现 AJAX 请求的第三方库/工具。️ 你的下一步建议你可以试着在你现在的 Spring Boot 项目中用最简单的方式模拟一下后端写个/hello接口。前端用一段 Axios 代码去调用它axios.get(/hello).then(resconsole.log(res.data));