AJAX 高频面试题及详细答案（实战版）

AJAX高频面试题及详细答案（实战版）一、基础概念类（入门必问）1、什么是AJAX？核心作用是什么？答案：AJAX全称是异步JavaScript和XML，是一种无需刷新整个页面，就能和服务器进行异步通信、局部更新页面数据的前端技术方案。核心作用主要有两点：1.实现页面无刷新数据交互，避免整页重载，提升用户浏览体验；2.异步请求服务器，不会阻塞页面渲染和用户操作，页面交互更流畅。补充：虽然名字带XML，但现在开发中基本都用JSON作为数据传输格式，XML已基本淘汰。2、AJAX的最大优势和缺点分别是什么？答案：优势：1.局部刷新页面，减少无效资源加载，提升页面响应速度；2.异步请求，不阻塞主线程，用户可以持续操作页面，不会出现卡顿空白；3.按需请求数据，减少服务器和带宽的压力。缺点：1.存在跨域问题，浏览器同源策略会限制非同源的AJAX请求；2.无法被搜索引擎良好抓取，异步渲染的数据不利于SEO；3.前进后退浏览器历史记录失效，局部刷新不会更新页面历史；4.若请求频繁、无节流防抖，容易造成服务器请求压力过大。3、同步AJAX和异步AJAX的区别？实际开发用哪个？答案：AJAX初始化时有一个async参数，用来控制同步/异步：1.异步（async:true，默认）：发送请求后，代码不会等待服务器响应，直接继续执行后续逻辑，响应结果通过回调函数处理，不阻塞页面；2.同步（async:false）：发送请求后，会阻塞主线程，暂停所有页面操作和代码执行，直到服务器返回结果后，才继续执行后续代码。开发规范：基本全部使用异步AJAX。同步AJAX会造成页面卡死、用户无法操作，几乎不推荐使用，仅极少数特殊场景临时使用。二、原理与核心流程类（高频核心）4、原生AJAX的完整请求流程是什么？答案：原生AJAX请求分为5个核心步骤，是面试必背流程：1.创建XMLHttpRequest对象：这是浏览器内置的HTTP请求对象，是AJAX的核心；2.初始化请求参数（open）：设置请求方式、请求地址、是否异步；3.监听请求状态变化（onreadystatechange）：监听请求的整个生命周期，判断请求是否完成、是否成功；4.发送请求（send）：将请求发送到服务器，GET请求传null，POST请求传参数；5.处理响应结果：请求成功后，解析服务器返回的数据，更新页面局部内容。5、XMLHttpRequest的readyState状态码分别代表什么？答案：readyState用来标识AJAX请求的当前状态，共5个状态：0：未初始化，open方法还未调用；1：请求已建立，open已调用，但还未发送请求（send未执行）；2：请求已发送，响应头和响应状态已接收完成；3：正在接收服务器返回的数据，部分数据已返回；4：请求完成，所有数据接收完毕，无论请求成功还是失败，都会走到该状态。开发中只需要判断readyState===4，再结合HTTP状态码判断请求是否成功。6、HTTP状态码200、304、404、500在AJAX中分别代表什么？答案：200：请求成功，服务器正常返回数据；304：协商缓存生效，资源未更新，直接读取浏览器本地缓存，无需重新请求服务器；404：请求地址不存在，接口路径错误、接口下线或路径拼写错误；500：服务器内部错误，后端代码报错、接口逻辑异常，前端无法解决，需后端排查。7、GET和POST在AJAX请求中的核心区别？答案：1.参数位置不同：GET参数拼接在URL后面；POST参数放在请求体中；2.数据大小限制：GET受URL长度限制，只能传少量数据；POST无大小限制，可传大量数据、文件、表单；3.缓存特性：GET请求会被浏览器默认缓存；POST默认不缓存；4.安全性：GET参数暴露在地址栏，不安全；POST参数在请求体，相对更安全；5.书签/历史记录：GET请求可保存书签、记录历史；POST不会被记录；6.使用场景：GET用于查询数据（查）；POST用于提交数据、新增修改数据（增改）。三、实战易错点类（面试高频坑点）8、AJAXPOST请求为什么有时候接收不到参数？如何解决？答案：核心原因：POST请求默认的请求体格式和后端接收格式不匹配，浏览器默认发送text/plain格式，后端无法解析。解决方案：手动设置请求头内容类型，适配后端接收格式：1.表单格式参数：设置content-type:application/x-www-form-urlencoded；2.JSON格式参数（主流）：设置content-type:application/json，同时参数需要JSON.stringify序列化。9、什么是AJAX跨域？跨域的根本原因是什么？答案：跨域指当前页面的协议、域名、端口号任意一个和请求接口不一致，就会触发跨域。根本原因：浏览器的同源策略，这是浏览器的安全机制，禁止非同源页面之间的AJAX数据交互，防止恶意网站窃取数据。注意：跨域是浏览器的限制，服务器之间互相请求是没有跨域限制的。10、常见的AJAX跨域解决方案有哪些？各自适用场景？答案：1.CORS跨域资源共享（主流）：后端配置响应头，允许前端域名跨域请求，正式项目通用方案；2.本地代理转发（开发环境）：vue-cli、vite、webpack配置proxy代理，前端请求本地服务，由本地服务转发请求后端接口，只用于本地开发；3.JSONP：利用script标签不受跨域限制的特性实现跨域，只支持GET请求，兼容性好但安全性低，现在基本淘汰；4.nginx反向代理：线上服务器配置nginx转发，统一域名端口，解决跨域，适合线上部署场景。11、AJAX如何解决请求重复、防抖节流问题？答案：高频场景：搜索框输入实时请求、按钮重复点击提交，会产生大量无效请求。常用解决方案：1.防抖：用户持续操作时，延迟执行请求，停止操作指定时间后再发送一次请求，适合搜索输入框；2.节流：固定时间内只执行一次请求，适合滚动加载、下拉刷新；3.取消上一次请求：每次发送新请求前，终止上一次未完成的AJAX请求（xhr.abort()），避免旧请求覆盖新数据。12、AJAX请求超时如何处理？答案：可以通过xhr对象的timeout属性设置超时时间（毫秒），配合ontimeout监听超时回调。1.设置timeout：指定请求最大等待时间，超过时间自动终止请求；2.监听ontimeout事件：超时后提示用户网络异常、请求超时，同时终止请求，避免无效等待；3.优化方案：超时后可添加重试机制，限制重试次数，提升接口稳定性。四、手写代码类（实操面试题）13、手写一个完整的原生AJAXGET请求答案：javascript

//原生AJAXGET请求

functionajaxGet(url,callback){

//1.创建xhr对象

constxhr=newXMLHttpRequest();

//2.初始化请求

xhr.open('GET',url,true);

//3.设置超时时间

xhr.timeout=5000;

//4.监听状态变化

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

//请求成功，返回解析后的JSON数据

callback(JSON.parse(xhr.responseText),null);

}else{

//请求失败

callback(null,'请求失败');

}

}

}

//监听超时

xhr.ontimeout=function(){

callback(null,'请求超时');

}

//5.发送请求

xhr.send(null);

}

14、手写一个完整的原生AJAXPOST请求（JSON格式）答案：javascript

//原生AJAXPOST请求

functionajaxPost(url,data,callback){

constxhr=newXMLHttpRequest();

xhr.open('POST',url,true);

//设置请求头为JSON格式

xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');

xhr.timeout=5000;

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

callback(JSON.parse(xhr.responseText),null);

}else{

callback(null,'请求失败');

}

}

}

xhr.ontimeout=function(){

callback(null,'请求超时');

}

//序列化JSON数据并发送

xhr.send(JSON.stringify(data));

}

五、进阶对比类（中高级面试）15、AJAX、Fetch、Axios的区别？项目中如何选择？答案：1.原生AJAX（XMLHttpRequest）优点：浏览器原生支持，无需引入依赖，兼容性极好；缺点：代码繁琐、回调地狱严重、无统一拦截、不支持Promise；适用：简单静态页面、老旧项目临时请求。2.Fetch优点：ES6原生API，基于Promise，语法简洁，无需依赖；缺点：兼容性略差、只捕获网络错误，不捕获404/500接口错误、无超时配置、无请求拦截；适用：简单请求、轻量项目。3.Axios优点：基于Promise封装、支持请求/响应拦截、自带超时、自动转换JSON数据、兼容浏览器和Node、防止重复请求；缺点：需要安装第三方依赖；适用：所有正式Vue/React项目、企业级开发首选。16、什么是回调地狱？AJAX如何解决回调地狱问题？答案：当多个AJAX请求层层嵌套（后一个请求依赖前一个请求的结果），会导致代码层级嵌套过深、可读性极差、难以维护，这就是回调地狱。解决方案：1.采用Promise封装原生AJAX，扁平化代码；2.使用async/await同步化异步代码，彻底解决嵌套问题；3.项目中直接使用Axios，天然支持Promise和async/await。17、AJAX如何实现请求拦截和响应拦截？答案：原生AJAX没有自带拦截机制，需要手动封装；实际开发中全部使用Axios的拦截器：1.请求拦截：请求发送前统一处理，比如携带token、统一设置请求头、开启loading、校验参数；2.响应拦截：接口返回数据后统一处理，比如统一解析数据、处理401登录过期、统一报错提示、关闭loading。六、综合场景题18、页面刷新后AJAX数据丢失是什么原因？怎么解决？答案：原因：页面刷新会重置JS执行环境，内存中的AJAX请求数据会被清空，需要重新请求接口。解决方案：1.页面挂载完成后（onload/生命周期钩子）重新发起AJAX请求；2.核心数据缓存到localStorage/sessionStorage，刷新后读取缓存，减少重复请求；3.路由缓存页面（Vuekeep-alive），保留页面数据状态。19、AJAX异步请求为什么拿不到外部变量数据？答案：因为AJAX是异步宏任务，代码执行顺序：同步代码先执行完毕，再执行异步回调。场景：定义变量=>发送AJAX请求=>打印