2025年高频ajax的面试题及答案

2025年高频ajax的面试题及答案AJAX的核心是通过JavaScript在后台与服务器进行异步数据交换，避免页面整体刷新。以下是2025年前端面试中高频出现的AJAX相关问题及深度解析：问：请描述XMLHttpRequest（XHR）和FetchAPI的核心差异，为什么现代项目更倾向使用Fetch？答：XHR是早期浏览器提供的异步请求API，基于事件回调机制；Fetch是ES6后推出的基于Promise的现代API，遵循更简洁的函数式设计。核心差异体现在：1.API设计：XHR通过实例方法（open、send）和事件监听（onload、onerror）实现，代码嵌套复杂；Fetch返回Promise，可通过.then()或async/await链式调用，结构更清晰。2.错误处理：XHR需手动检查status属性（如xhr.status===200）；Fetch的Promise仅在网络失败时reject（如断网），HTTP错误状态（404/500）会视为成功响应，需通过response.ok（布尔值）判断业务错误。3.请求/响应处理：XHR需手动解析响应体（如xhr.responseText）；Fetch的Response对象提供json()、blob()等方法返回Promise，自动解析数据格式。4.取消请求：XHR通过abort()方法中断；Fetch依赖AbortController，通过signal属性关联请求，更符合现代取消模型。现代项目倾向Fetch的原因：Promise天然适配异步编程（避免回调地狱），API更符合函数式编程习惯，且浏览器兼容性已覆盖主流版本（除极老设备）。但实际开发中常使用Axios等库，因其封装了请求拦截、自动转换JSON、错误处理等实用功能。问：如何解决AJAX跨域问题？CORS的预检请求（PreflightRequest）触发条件是什么？答：跨域问题源于浏览器的同源策略（协议、域名、端口需完全一致）。常见解决方案：1.CORS（跨域资源共享）：服务端设置响应头，如Access-Control-Allow-Origin:（或指定域名）、Access-Control-Allow-Methods:GET,POST等。前端无需额外操作，适用于所有类型的请求。2.JSONP：利用<script>标签无跨域限制的特性，服务端返回包裹在函数调用中的数据（如callback({data:1})）。前端定义回调函数并动态创建script标签。仅支持GET请求，安全性差（易受XSS攻击）。3.代理服务器：前端请求本地服务器（如Node中间件），由本地服务器转发至目标地址，规避跨域。常见于开发环境（WebpackDevServer的proxy配置）或生产环境（Nginx反向代理）。4.PostMessage：适用于窗口间通信（如iframe与父页面），通过window.postMessage()发送数据，监听message事件接收。CORS预检请求触发条件：当请求方法为非简单请求（非GET/HEAD/POST），或POST请求的Content-Type非application/x-www-form-urlencoded、multipart/form-data、text/plain，或请求头包含自定义头（如Authorization）时，浏览器会先发送OPTIONS方法的预检请求，确认服务器允许该跨域请求后再发送实际请求。预检请求的响应头需包含Access-Control-Allow-Methods（允许的方法）、Access-Control-Allow-Headers（允许的请求头）、Access-Control-Max-Age（预检结果缓存时间，单位秒）。问：AJAX请求中如何处理网络错误和业务错误？实际项目中如何统一捕获并处理？答：网络错误指请求无法到达服务器（如断网、DNS解析失败、服务器超时），此时XHR触发error事件，Fetch的Promise会reject；业务错误指服务器返回HTTP状态码2xx但业务逻辑失败（如参数错误返回{code:400,msg:"参数缺失"}），或HTTP状态码非2xx（如404/500）。处理方式：XHR：通过onerror监听网络错误，onload回调中检查status是否为200，再解析响应体判断业务错误。Fetch：通过.catch()捕获网络错误，在.then()中检查response.ok（等价于status在200-299），若为false则抛出错误（如thrownewError(response.status)），再处理业务错误（解析response.json()后判断code字段）。实际项目中通常封装通用请求函数，实现统一错误处理：1.请求拦截：添加公共头（如Authorization:Bearertoken）、处理请求参数（如序列化）。2.响应拦截：检查HTTP状态码（如401未授权则跳转登录）、解析业务错误码（如code=50001提示“服务器异常”）。3.全局提示：通过Toast或Modal统一展示错误信息，避免在每个业务接口重复写提示逻辑。示例（基于Axios）：```javascriptconstinstance=axios.create({baseURL:'/api'});//请求拦截erceptors.request.use(config=>{config.headers.Authorization=localStorage.getItem('token');returnconfig;});//响应拦截erceptors.response.use(response=>{const{code,data,msg}=response.data;if(code!==0){//假设code=0为成功ElMessage.error(msg);//ElementUI提示returnPromise.reject(newError(msg));}returndata;},error=>{if(error.response){const{status}=error.response;if(status===401){localStorage.removeItem('token');router.push('/login');//跳转到登录页}else{ElMessage.error(`请求失败，状态码：${status}`);}}else{ElMessage.error('网络异常，请检查连接');}returnPromise.reject(error);});```问：如何取消未完成的AJAX请求？AbortController在Fetch中的具体应用场景？答：取消请求的常见场景：用户快速切换页面（如列表页跳转到详情页后，列表的请求无需继续）、重复提交表单（取消前一次未完成的请求）。XHR取消：调用xhr.abort()方法，会触发abort事件，且请求会被标记为已取消（status为0）。Fetch取消：使用AbortController，创建controller实例，通过controller.signal关联到fetch的init参数中。调用controller.abort()会触发AbortError，可在catch中捕获。示例：```javascriptconstcontroller=newAbortController();constsignal=controller.signal;fetch('/api/data',{signal}).then(response=>response.json()).then(data=>console.log(data)).catch(err=>{if(==='AbortError'){console.log('请求已取消');}else{console.error('请求失败:',err);}});//3秒后取消请求setTimeout(()=>controller.abort(),3000);```实际项目中，可在组件卸载时取消未完成的请求（如React的useEffect返回清理函数，Vue的beforeUnmount钩子），避免状态更新到已卸载的组件，导致内存泄漏。例如React中：```javascriptuseEffect(()=>{constcontroller=newAbortController();fetchData(controller.signal);//传递signal到请求函数return()=>controller.abort();//组件卸载时取消请求},[]);```问：AJAX请求的性能优化有哪些手段？如何减少不必要的请求？答：性能优化核心目标是减少请求次数、缩短响应时间、降低带宽消耗。具体手段：1.请求合并：将多个小请求合并为一个大请求（如批量获取数据接口），减少HTTP连接开销（HTTP/1.1的队头阻塞问题）。2.缓存策略：强缓存：通过Cache-Control（max-age）或Expires头，让浏览器直接使用本地缓存，无需发起请求。协商缓存：通过ETag（资源哈希）和Last-Modified（最后修改时间），若资源未变化，服务器返回304NotModified，减少响应体大小。前端缓存：使用localStorage/sessionStorage或内存缓存（如Vuex/Pinia）存储高频访问的数据，避免重复请求。3.压缩数据：服务端开启Gzip/Brotli压缩，减少响应体大小（如设置Content-Encoding:gzip）。4.使用HTTP/2：支持多路复用（一个TCP连接处理多个请求）、服务器推送（提前推送依赖资源），提升请求效率。5.防抖与节流：针对高频触发的请求（如搜索框输入联想），使用防抖（延迟执行，输入停止后再请求）或节流（固定时间间隔仅执行一次），减少请求次数。减少不必要请求的方法：检查请求是否重复：如用户连续点击按钮，可在请求未完成时禁用按钮或取消前一次请求。过滤无效请求：如搜索框输入空字符串时，不发送请求。预加载数据：在用户可能访问的页面提前加载数据（如进入详情页前，列表页已缓存部分详情数据）。问：解释AJAX中的“同源策略”及其限制范围，哪些操作会被同源策略阻止？答：同源策略是浏览器的安全基石，限制不同源（协议、域名、端口任意一个不同）的脚本对当前页面资源的访问。其核心目的是防止XSS、CSRF等跨站攻击。被阻止的操作包括：1.AJAX请求：非同源的服务器无法通过XMLHttpRequest或Fetch获取响应数据（CORS允许的情况除外）。2.DOM操作：无法访问非同源iframe的DOM节点（如通过document.getElementById获取跨域iframe内的元素）。3.数据存储访问：无法读取非同源页面的localStorage、IndexedDB等数据（Cookies通过SameSite属性控制）。例外情况：跨域资源嵌入：<img>、<script>、<link>等标签可加载非同源资源，但脚本执行时受同源限制（如无法获取<script>的响应内容）。CORS：通过服务端设置允许的源，解除AJAX跨域限制。问：如何实现大文件的分块上传？AJAX在其中的关键作用是什么？答：大文件分块上传的核心步骤：1.文件切片：前端使用File.slice(start,end)方法将文件分割为多个小块（如每块5MB）。2.计算哈希：对每个块计算哈希值（如SparkMD5），或对整个文件计算哈希（用于秒传，判断文件是否已存在）。3.并发上传：使用AJAX（如FormData携带chunk=第n块,total=总块数,hash=文件哈希）并发上传多个块（需控制并发数，避免浏览器连接限制）。4.合并块：所有块上传完成后，向服务端发送合并请求，服务端按顺序拼接块并提供完整文件。AJAX的关键作用：支持FormData对象上传二进制数据（newFormData().append('file',chunk)）。通过xhr.upload.onprogress监听上传进度（计算已上传块数/总块数）。支持中断上传（xhr.abort()），恢复时可跳过已上传的块（服务端记录已上传块号）。示例代码（分块上传逻辑）：```javascriptconstuploadFile=async(file)=>{constchunkSize=510241024;//5MB每块consttotalChunks=Math.ceil(file.size/chunkSize);constfileHash=awaitcomputeFileHash(file);//计算文件哈希for(leti=0;i<totalChunks;i++){conststart=ichunkSize;constend=Math.min(start+chunkSize,file.size);constchunk=file.slice(start,end);constformData=newFormData();formData.append('chunk',chunk);formData.append('chunkIndex',i);formData.append('totalChunks',totalChunks);formData.append('fileHash',fileHash);awaitfetch('/api/upload-chunk',{method:'POST',body:formData});}//合并块awaitfetch('/api/merge-chunks',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({fileHash,filename:})});};```问：AJAX与WebSocket的主要区别是什么？何时选择使用WebSocket而非AJAX？答：核心区别：1.通信模式：AJAX是客户端主动发起的单次请求-响应模式；WebSocket是全双工通信，客户端和服务器可随时向对方发送数据。2.协议：AJAX基于HTTP/HTTPS；WebSocket基于WS/WSS（HTTP升级协议，握手阶段使用HTTP，之后切换为独立的TCP连接）。3.实时性：AJAX需轮询（Polling）实现实时通信（如每3秒请求一次），延迟高且浪费带宽；WebSocket建立持久连接，服务器可即时推送消息，延迟低。选择WebSocket的场景：需要实时双向通信（如在线聊天、股票行情、游戏状态同步）。服务器需主动向客户端推送数据（如通知、预警信息）。高频次小数据量交互（如实时弹幕、协同编辑），避免HTTP轮询的连接开销。问：如何防止AJAX请求中的CSRF攻击？具体实现方式有哪些？答：CSRF（跨站请求伪造）利用用户已登录的身份，在用户不知情的情况下发送恶意请求。防范措施：1.CSRFToken：前端：请求时携带服务器提供的Token（如从Cookie或响应头中获取）。后端：验证请求头（如X-CSRF-Token）或请求体中的Token是否与用户会话中的Token一致。实现：登录后服务器返回Token（如存储在localStorage），每次AJAX请求将Token添加到请求头（如mon['X-CSRF-Token']=token）。2.SameSiteCookie：设置Cookie的SameSite属性为Strict或Lax，限制Cookie仅在同源或同站请求中发送。例如：`Set-Cookie:sessionId=abc123;SameSite=Strict;Secure`Strict：仅同源请求发送Cookie；Lax：允许部分安全的跨站请求（如GET跳转）。3.验证Referer头：后端检查请求的Referer是否属于可信域名（如通过请求头的Referer字段）。但Referer可能被篡改或浏览器不发送（如HTTPS页面请求HTTP资源），可靠性较低。4.双重Cookie验证：服务器提供随机数作为Cookie（如csrfCookie=xyz），前端将该值添加到请求体或头中（如csrfParam=xyz）。后端验证两者是否一致，防止跨站请求伪造（因攻击者无法获取用户Cookie）。实际项目中，CSRFToken与SameSiteCookie结合使用是最常见的方案。例如，Vue项目中通过axios拦截器自动添加Token：```erceptors.request.use(config=>{constcsrfToken=localStorage.getItem('csrfToken');if(csrfToken){config.headers['X-CSRF-Token']=csrfToken;}returnconfig;});```问：描述AJAX请求中HTTP方法的正确使用场景，为什么GET请求通常不建议修改服务器数据？答：HTTP方法应遵循RESTful语义：GET：获取资源（无副作用，可缓存）。POST：创建资源（有副作用，不可缓存）。PUT：完整更新资源（替换整个资源）。PATCH：部分更新资源（仅修改部分字段）。DELETE：删除资源。GET请求不建议修改数据的原因：1.缓存特性：浏览器会缓存GET请求结果，若请求修改数据，后续缓存可能返回旧数据，导致状态不一致。2.历史记录：浏览器会记录URL到历史栈，用户回退时可能重复触发GET请求，意外修改数据。3.URL长度限制：GET参数拼接在URL中（如?name=abc），部分浏览器/服务器限制URL长度（如IE的2083字符），无法传递大数据。4.语义不符：GET的设计目的是“获取”，违反REST规范会导致API难以理解和维护。实际开发中，若需修改数据，应使用POST/PUT/DELETE等方法，并在后端验证方法类型（如Django的require_http_methods装饰器限制允许的方法）。问：如何监控AJAX请求的性能？关键指标有哪些？答：监控AJAX性能的目的是定位慢请求，优化用户体验。关键指标包括：响应时间（TTFB，TimeToFirstByte）：从请求发送到接收第一个字节的时间。下载时间：从接收第一个字节到完成整个响应的时间。请求耗时：总耗时（下载时间+网络延迟+服务器处理时间）。错误率：请求失败的比例（网络错误+业务错误）。监控方法：1.浏览器API