27、AJAX 原理是什么？如何实现？

这个问题非常经典面试里经常会从“AJAX 是什么”一路问到“底层原理、实现方式、和 fetch 区别、跨域、异步流程、错误处理”。你如果答得有层次会显得基础很扎实。一、AJAX 是什么AJAX Asynchronous JavaScript and XML即异步的 JavaScript 和 XML。但现在它并不局限于 XML更多使用的是JSON。它的核心作用是在不刷新整个页面的情况下使用 JavaScript 与服务器进行数据通信并动态更新页面内容。比如搜索框输入关键字时出现联想提示点赞后数字立刻变化下拉加载更多表单校验局部刷新评论列表二、AJAX 的核心原理AJAX 的本质并不神秘核心就是这几步浏览器通过 JavaScript 创建一个 HTTP 请求对象早期主要是XMLHttpRequest现在也常用fetch前端向服务器发送异步请求请求可以是 GET、POST、PUT、DELETE 等服务器接收请求并返回数据常见格式JSON、文本、XML、HTML 片段等前端拿到响应数据后用 JavaScript 更新 DOM只更新局部内容不刷新整个页面一句话理解原理AJAX 本质上就是浏览器通过 JS 发起异步 HTTP 请求服务器返回数据前端再局部更新页面。三、为什么 AJAX 能做到“局部刷新”因为传统页面交互是用户点击链接 / 提交表单浏览器重新请求整个 HTML 页面页面整体刷新而 AJAX 是JavaScript 在后台发请求请求返回的是“数据”而不是完整页面JavaScript 拿到数据后手动修改页面某一部分所以用户看起来就是页面没跳转、没刷新但内容变了。四、AJAX 的工作流程可以用下面这个流程来回答用户触发事件 ↓ JavaScript 创建 XMLHttpRequest 对象 ↓ 调用 open() 配置请求地址和请求方式 ↓ 调用 send() 发送请求 ↓ 服务器处理请求并返回响应 ↓ 浏览器监听 readyState / onreadystatechange / onload ↓ 拿到响应数据 responseText / responseXML ↓ 通过 DOM 操作更新页面五、AJAX 的实现方式1. 使用 XMLHttpRequest 实现这是最经典、最标准的 AJAX 实现方式。示例GET 请求const xhr new XMLHttpRequest(); xhr.open(GET, /api/user?id1, true); xhr.onreadystatechange function () { if (xhr.readyState 4) { if (xhr.status 200 xhr.status 300) { const data JSON.parse(xhr.responseText); console.log(data); } else { console.error(请求失败); } } }; xhr.send();示例POST 请求const xhr new XMLHttpRequest(); xhr.open(POST, /api/login, true); xhr.setRequestHeader(Content-Type, application/json); xhr.onreadystatechange function () { if (xhr.readyState 4) { if (xhr.status 200) { console.log(JSON.parse(xhr.responseText)); } } }; xhr.send(JSON.stringify({ username: test, password: 123456 }));2. 使用 fetch 实现现代开发中更常见的是fetch它基于 Promise写法更简洁。fetch(/api/user?id1) .then(response { if (!response.ok) { throw new Error(请求失败); } return response.json(); }) .then(data { console.log(data); }) .catch(err { console.error(err); });3. 使用 axios 实现项目里很多人会用 axios本质上也是对 HTTP 请求的封装。axios.get(/api/user, { params: { id: 1 } }).then(res { console.log(res.data); }).catch(err { console.error(err); });六、XMLHttpRequest 的关键知识点面试官很喜欢顺着问这一块。1.open(method, url, async)用于初始化请求xhr.open(GET, /api/list, true);参数含义method请求方式url请求地址async是否异步通常写true2.send()发送请求xhr.send();如果是 POSTxhr.send(JSON.stringify(data));3.setRequestHeader()设置请求头xhr.setRequestHeader(Content-Type, application/json);4.readyState表示请求当前状态共 5 个值0未初始化1已调用open2已接收到响应头3正在下载响应体4请求完成通常重点记住readyState 4 表示请求完成5.statusHTTP 状态码200成功201创建成功204无内容301/302重定向304缓存命中400请求错误401未认证403无权限404资源不存在500服务器错误通常这样判断if (xhr.status 200 xhr.status 300) { // 成功 }6. 响应数据responseText字符串形式响应体responseXMLXML 形式响应体现在大多数接口返回 JSON所以一般写JSON.parse(xhr.responseText)七、AJAX 的优点面试里不要只说“局部刷新”可以说得更完整无刷新更新页面提升用户体验减少不必要的页面整体请求节省带宽前后端数据交互更灵活可以实现更流畅的交互效果适合单页应用SPA的数据通信八、AJAX 的缺点这个也常考答出来会显得更全面。对 SEO 不友好因为初始 HTML 内容可能少很多内容靠 JS 动态加载浏览器前进后退管理复杂需要配合 History API存在跨域问题浏览器同源策略限制 AJAX 请求错误处理、并发控制、取消请求等需要额外设计不能完全替代传统页面渲染首屏渲染、SSR 场景仍然重要九、AJAX 会不会阻塞页面这要区分1. 同步请求如果把async设为falsexhr.open(GET, /api/data, false);这会导致JS 线程阻塞页面卡住用户不能操作所以现在几乎不用同步 AJAX。2. 异步请求异步请求不会阻塞主线程等待响应响应回来后再执行回调。所以 AJAX 的核心就是异步通信避免页面卡死。十、AJAX 和 fetch 的区别面试中经常会追问。AJAX 和 XHR严格来说AJAX 是一种技术思想XMLHttpRequest 是实现 AJAX 的一种对象也就是说AJAX 不是某个具体 API而是一种“异步通信 局部刷新”的方案。XHR 和 fetch 的区别XMLHttpRequest优点兼容性老牌能监听上传进度功能较完整缺点写法繁琐基于事件回调不够优雅fetch优点基于 Promise写法更现代更适合 async/await缺点默认对 HTTP 4xx/5xx 不会 reject对上传进度支持不如 XHR 直观老旧浏览器兼容性略差十一、AJAX 常见面试延伸问题1. AJAX 为什么能跨页面局部更新因为服务器返回的是数据不是整个 HTML 页面。前端通过 JS 操作 DOM只修改某个区域。2. AJAX 为什么会有跨域问题因为浏览器有同源策略同源要求协议相同域名相同端口相同不满足就会被限制。解决方式CORS代理服务器JSONP只支持 GET老方案3. AJAX 请求一定是异步的吗不是。XMLHttpRequest可以同步也可以异步。但现代开发中基本都用异步。4. AJAX 返回的数据格式有哪些常见有JSONXMLHTML 片段Text现在最常见的是JSON。5. AJAX 能发送文件吗能。可以结合FormDataconst formData new FormData(); formData.append(file, fileInput.files[0]); const xhr new XMLHttpRequest(); xhr.open(POST, /upload, true); xhr.send(formData);十二、手写一个简单的 AJAX 封装如果面试官让你“封装一个 ajax 方法”可以这样写function ajax({ method GET, url, data null, headers {} }) { return new Promise((resolve, reject) { const xhr new XMLHttpRequest(); xhr.open(method, url, true); for (let key in headers) { xhr.setRequestHeader(key, headers[key]); } xhr.onreadystatechange function () { if (xhr.readyState 4) { if (xhr.status 200 xhr.status 300) { try { resolve(JSON.parse(xhr.responseText)); } catch (e) { resolve(xhr.responseText); } } else { reject(new Error(请求失败: ${xhr.status})); } } }; xhr.onerror function () { reject(new Error(网络错误)); }; if (method.toUpperCase() GET || data null) { xhr.send(); } else { xhr.send(JSON.stringify(data)); } }); }调用方式ajax({ method: GET, url: /api/user }).then(res { console.log(res); }).catch(err { console.error(err); });十三、面试中怎么回答更精彩这里给你一个“由浅入深”的高分回答模板。版本一标准版AJAX 本质上是一种异步请求技术它允许前端在不刷新整个页面的情况下通过 JavaScript 向服务器发送 HTTP 请求并获取数据然后再通过 DOM 操作局部更新页面。它最经典的实现方式是XMLHttpRequest现在也常用fetch或 axios。整个流程一般是创建请求对象、调用open()初始化请求、通过send()发送请求、监听响应状态、拿到数据后更新页面。AJAX 的优点是提升用户体验、减少整页刷新缺点是有跨域、SEO 不友好、错误处理复杂等问题。这个版本已经不错了。版本二面试加分版AJAX 不是某个具体技术而是一种“异步数据通信 局部页面更新”的方案。它的核心原理是浏览器通过 JavaScript 创建XMLHttpRequest对象向服务器发起异步 HTTP 请求服务器返回 JSON 或 XML 等数据后前端再根据响应结果动态更新 DOM而不需要整页刷新。传统页面交互是服务端返回完整 HTML浏览器整体刷新而 AJAX 返回的是数据页面由前端局部渲染所以体验更流畅。从实现上早期主要使用XMLHttpRequest现在更多使用fetch和 axios。如果再深入一点AJAX 面试里还经常会结合跨域、状态码、Promise 封装、请求取消、并发控制、缓存策略这些问题一起问。这个回答会显得你不仅会定义还知道扩展方向。版本三高级版适合 3-5 年经验我理解 AJAX 的重点不在于名字而在于它把“页面刷新”变成了“数据请求 局部更新”。底层上浏览器提供了XMLHttpRequest这样的能力前端可以异步发起 HTTP 请求服务器返回结构化数据前端拿到数据后再决定如何更新视图。这也是前后端分离和 SPA 应用的基础。像 Vue、React 项目里虽然我们平时更多用 axios/fetch但本质上仍然是在做 AJAX 通信。实际工程里除了基础用法我还会关注请求封装、统一错误处理、鉴权 token 注入、取消重复请求、接口幂等、跨域配置、缓存以及 loading 状态管理等问题。这类回答会让面试官觉得你有实战。十四、回答这题的技巧建议你按这几个层次说第一层一句话定义AJAX 是一种在不刷新整个页面的情况下与服务器异步通信并局部更新页面的技术。第二层原理本质是通过XMLHttpRequest或fetch发 HTTP 请求服务器返回数据前端更新 DOM。第三层实现可以用XMLHttpRequest也可以用fetch、axios。第四层优缺点优点是提升体验、局部刷新缺点是跨域、SEO、历史记录管理复杂。第五层工程化扩展请求封装、拦截器、错误处理、取消请求、并发控制、缓存策略。这样回答会非常完整。十五、你可以直接背的面试答案AJAX 是一种异步通信技术核心是通过 JavaScript 在后台向服务器发送 HTTP 请求在不刷新整个页面的情况下获取数据并通过 DOM 操作实现局部更新。 它的经典实现方式是 XMLHttpRequest现代开发中也常使用 fetch 和 axios。从流程上来说就是先创建请求对象调用 open 配置请求再通过 send 发送请求监听响应状态拿到服务器返回的数据后更新页面。 AJAX 的优点是用户体验好、减少整页刷新、提升交互流畅度缺点是存在跨域问题、对 SEO 不太友好同时历史记录和错误处理会更复杂。 如果从工程实践来看AJAX 往往还会结合 Promise 封装、统一鉴权、错误处理、取消重复请求和接口缓存等能力一起使用。十六、最后帮你总结成“面试官最爱听的关键词”你答题时尽量带上这些词异步请求局部刷新HTTP 通信XMLHttpRequestfetch / axiosDOM 更新JSONreadyState / status跨域前后端分离请求封装错误处理