早期网页有个很麻烦的问题只要需要从后端拿一点新数据必须刷新整个页面页面一闪所有已填的表单、滚动位置全部丢失体验很差。AJAX 就是为了解决这个问题诞生的。一、什么是 AJAXAJAX 全称Asynchronous JavaScript And XML谐音诶辛克若呢斯 杰瓦斯克瑞普特 安的 艾克斯麦欧翻译异步 JavaScript 和 XML作用在不刷新整个页面的前提下通过 JS 和服务器通信局部更新页面数据。使用场景表单提交提交后页面不刷新搜索框输入联想提示滚动加载更多下拉分页点赞、评论无需刷新页面获取列表数据、后台管理表格查询 重点AJAX 不是一门新语言是一套技术组合方案JavaScript XMLHttpRequestXHR 对象 DOM 异步名字里虽然带 XML但现在我们基本都用JSON传递数据XML 很少用了只是名字保留下来。原生 AJAX 简单示例// 1. 创建请求对象 let xhr new XMLHttpRequest(); // 2. 配置请求方式与地址 xhr.open(GET,/api/list); // 3. 监听请求完成事件 xhr.onload function(){ if(xhr.status 200){ // 获取后端返回的json字符串转成对象 let res JSON.parse(xhr.responseText); console.log(res); } } // 4. 发送请求 xhr.send();后来的 jQuery.ajax、axios、fetch底层本质都是对 AJAX 的封装。二、为什么要使用 AJAX无需刷新整个页面局部更新传统表单提交页面整体刷新用户体验差。AJAX只更新需要变化的一小块内容页面其余部分保持不变。异步请求不阻塞主线程发送请求之后JS 不会卡在原地等待后端返回数据可以继续操作页面等后端数据回来再执行回调渲染页面。页面不会卡死。按需获取数据减少流量消耗不需要一次性加载页面全部数据需要的时候再请求接口。比如滚动加载更多只加载当前这一页数据减轻服务器压力提升加载速度。前后端分离开发前端只负责页面渲染后端只负责提供接口返回 JSON 数据。两者分开开发、单独部署。这也是现在主流开发模式AJAX 就是前后端数据通信的桥梁。三、AJAX 相关小知识点AJAX 请求会触发同源策略跨域请求会被浏览器拦截刚好接上一篇跨域博客AJAX 是异步通信当然 XHR 也支持设置为同步但同步 AJAX 会阻塞页面开发禁止使用常见封装jQuery$.ajax()axios最常用基于 Promise 封装fetch浏览器原生 API新一代方案四、生活类比不用 AJAX买书必须把整本书全部重新打印一遍才能修改其中一页文字。使用 AJAX只把需要修改那一页拿去印刷厂更新书本其余页面不动。五、误区❌ 误区AJAX 就是 axios✅ axios 是封装库原生 AJAX 是XMLHttpRequest对象。axios 只是简化了 AJAX 写法。❌ 误区AJAX 只能传 XML✅ 早期用 XML现在主流是 JSON。六、总结AJAX异步 JS 和 XML不刷新页面和后端交换数据局部更新页面。核心优势无刷新、异步、按需拿数据实现前后端分离提升用户体验。底层核心XMLHttpRequestaxios/fetch 都是 AJAX 的封装。
