AJAX 面试题及详细答案（实战向）

AJAX面试题及详细答案（实战向）一、基础概念类1.什么是AJAX？核心作用是什么？参考答案：AJAX全称是异步JavaScript和XML，它不是一门新语言，而是一种前端异步请求服务端数据的技术方案。核心是通过浏览器内置的XMLHttpRequest/Fetch接口，在不刷新整个页面的前提下，与服务器进行数据交互，局部更新页面内容。核心作用主要有两点：1.无刷新交互：避免页面整体重载，减少白屏、卡顿，大幅提升用户操作体验；2.异步通信：请求发送后不会阻塞主线程，用户可以正常操作页面，不用等待接口响应完成。2.AJAX的优缺点分别是什么？参考答案：优点：1.页面无刷新更新，交互体验流畅；2.异步请求，不阻塞JS主线程，页面响应性更好；3.按需请求数据，不用重复加载完整页面资源，节省带宽、提升加载速度；4.实现前后端分离，前端专注页面展示，后端专注数据处理。缺点：1.存在跨域限制，浏览器同源策略会拦截非同源的AJAX请求；2.无法被搜索引擎直接抓取异步加载的内容，不利于SEO优化；3.前进后退浏览器无法记录异步状态，需要手动处理历史记录；4.网络异常、超时、重复请求等场景需要手动封装处理，原生写法繁琐。3.AJAX同步和异步的区别？实际开发中怎么选择？参考答案：AJAX请求中open方法的第三个参数为布尔值，true代表异步，false代表同步。异步（默认）：发送请求后，JS代码继续向下执行，不会等待接口返回结果，响应结果通过回调函数处理，不阻塞页面。同步：发送请求后，阻塞主线程，页面卡死，必须等待接口响应完成、拿到结果后，才会继续执行后续代码。开发选择：99%的场景都用异步。只有极少数特殊场景（如接口数据必须前置加载完成，才能执行后续逻辑）会临时用同步，日常业务坚决不用同步，会严重影响用户体验。二、原理与原生实现类4.简述AJAX的工作流程参考答案：1.创建XMLHttpRequest实例对象，这是浏览器提供的HTTP请求对象；2.调用open()方法，初始化请求方式、请求地址、是否异步等参数；3.绑定onreadystatechange监听事件，监听请求状态的变化；4.调用send()方法，正式发送请求，GET请求参数可拼接在URL后，POST参数传入send中；5.服务器接收请求并处理，返回响应数据；6.监听事件触发，判断请求状态和响应状态码，成功后解析数据、更新页面。5.XMLHttpRequest的readyState状态码分别代表什么？参考答案：readyState用来标识AJAX请求的当前阶段，共5个状态：0：未初始化，已经创建XHR对象，但还未调用open()方法；1：请求已建立，open()已调用，请求参数初始化完成，未发送请求；2：请求已接收，send()已执行，服务器已接收请求，响应头信息返回完成；3：请求正在处理，正在接收服务器返回的响应体数据（部分数据可获取）；4：请求完成，全部响应数据接收完毕，可以正常解析使用。实战要点：业务中只判断readyState===4即可，代表请求流程走完。6.HTTP状态码200、301、302、404、500、403含义参考答案：200：请求成功，服务器正常返回数据；301：永久重定向，资源地址永久变更；302：临时重定向，本次请求临时跳转新地址；403：权限不足，服务器拒绝访问（登录过期、无操作权限常见）；404：请求地址不存在，接口路径错误、资源丢失；500：服务器内部错误，后端代码报错、接口逻辑异常。7.原生AJAXGET和POST请求的区别和写法差异参考答案：核心区别：1.参数位置：GET参数拼接在URL后面，POST参数放在请求体中；2.数据大小：GET有URL长度限制，只能传少量数据；POST无明确限制，可传大量数据、文件；3.缓存特性：GET请求会被浏览器缓存，重复请求会读取缓存数据；POST默认不缓存；4.安全性：GET参数暴露在地址栏，不安全；POST参数隐藏在请求体，相对安全；5.书签/历史：GET可保存书签、记录历史，POST不可以。写法差异：GET：参数拼接到url，send()传空；POST：需要手动设置请求头Content-Type:application/x-www-form-urlencoded，参数放入send()中传递。三、跨域与异常处理类8.什么是跨域？为什么AJAX会跨域？参考答案：跨域是指浏览器当前页面的协议、域名、端口任意一个和请求接口的地址不一致，就会触发跨域。跨域不是AJAX的问题，是浏览器的同源策略安全限制。浏览器为了防止恶意网站窃取用户数据，禁止非同源页面之间的资源交互，AJAX请求会被浏览器拦截响应，请求能发出去，但数据无法返回给前端。9.前端常见的跨域解决方案有哪些？各自适用场景？参考答案：1.CORS跨域资源共享（最常用）：后端配置响应头，允许指定域名访问，支持所有请求方式，适配正式项目；2.本地代理Proxy：Vue、React项目本地开发时配置代理，前端请求本地服务，由本地服务转发接口请求，只适用于开发环境；3.JSONP：利用script标签不受跨域限制的特性实现，只支持GET请求，兼容性好，但无法处理POST、异常捕获，现在基本淘汰；4.nginx反向代理：线上部署时通过nginx转发请求，统一域名端口，解决线上跨域问题；5.WebSocket：不受同源策略限制，适用于即时通讯、长连接场景。10.AJAX如何处理请求超时、网络异常、请求失败？参考答案：原生XHR可通过专属事件和属性处理异常，实际开发中必须兜底，避免页面无响应：1.超时处理：设置timeout属性指定超时时间，绑定ontimeout事件，超时后提示用户网络卡顿、重新请求；2.网络异常：绑定onerror事件，捕获断网、接口域名错误等网络层面的异常；3.业务失败：通过status状态码判断，4xx处理前端参数/权限问题，5xx提示服务器异常；4.请求终止：调用abort()方法，可手动取消正在进行的请求，解决重复请求问题。四、进阶实战与优化类11.什么是AJAX重复请求？怎么解决？参考答案：重复请求指短时间内多次触发同一个接口请求（比如按钮连续点击、快速切换标签），会导致数据错乱、接口压力增大、页面渲染异常等问题。解决方案：1.节流防抖：高频触发的场景（搜索框输入）用防抖，固定频率触发的场景用节流，减少请求次数；2.请求锁：定义加载状态变量，请求发起时锁置为true，禁止再次请求，请求结束后解锁；3.取消上一次请求：每次发起新请求前，调用abort()取消未完成的上一次同类型请求，保证只有最新请求生效；4.接口缓存：对无变化的静态数据，缓存响应结果，重复触发时直接读取缓存，不请求接口。12.Fetch和原生AJAX（XHR）的区别？参考答案：1.语法层面：XHR是回调写法，嵌套多容易产生回调地狱；Fetch基于Promise，支持async/await，代码更简洁优雅；2.异常处理：XHR可以捕获网络错误、超时、状态码错误；Fetch只捕获网络级错误，4xx、5xx业务错误不会抛出异常，需要手动判断response.ok；3.兼容性：XHR兼容所有老旧浏览器；Fetch不支持IE浏览器；4.功能支持：XHR支持请求进度、上传进度监听；Fetch原生进度监听较繁琐；5.默认配置：Fetch默认不携带cookie，需要手动配置credentials选项；XHR默认携带同域cookie。13.实际项目中AJAX请求如何封装？核心封装点有哪些？参考答案：项目中不会直接使用原生XHR或Fetch，都会统一封装请求方法，统一处理通用逻辑，减少冗余代码，核心封装点：1.统一请求头：统一配置token、Content-Type等公共请求头，不用每次请求单独配置；2.统一异常处理：统一捕获超时、断网、403权限、404地址错误、500服务异常，统一弹窗提示；3.请求加载状态：统一开启/关闭loading加载动画，避免每个页面单独写加载逻辑；4.token拦截与刷新：请求拦截器携带token，响应拦截器判断token过期，自动刷新token并重发请求；5.参数统一处理：GET、POST参数统一格式化，空参数过滤，避免无效参数传递；6.重复请求拦截：统一做请求去重、取消重复请求处理。14.谈谈AJAX缓存问题，如何手动控制缓存？参考答案：浏览器会对GET类型的AJAX请求做缓存，相同URL重复请求时，浏览器直接读取本地缓存，不会请求服务器，会导致数据更新不及时。解决缓存方案：1.URL加随机参数：每次请求拼接时间戳、随机数，让每次URL唯一，避免缓存；2.设置请求头禁止缓存：配置Cache-Control:no-cache、Pragma:no-cache；3.改用POST请求：POST请求默认不会被浏览器缓存；4.后端配置响应头：后端设置Expires、Cache-Control响应头，控制缓存策略。五、手写代码面试题15.手写一个完整的原生AJAXGET/POST请求参考答案：GET请求javascript

//原生AJAXGET请求

functionajaxGet(url,success,error){

//创建XHR实例

constxhr=newXMLHttpRequest();

//初始化请求

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

//设置超时时间

xhr.timeout=5000;

//监听状态变化

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status>=200&&xhr.status<300){

//请求成功，解析JSON数据

constres=JSON.parse(xhr.responseText);

success&&success(res);

}else{

//请求失败

error&&error(xhr.status);

}

}

};

//超时异常

xhr.ontimeout=function(){

error&&error("请求超时");

};

//网络异常

xhr.onerror=function(){

error&&error("网络异常");

};

//发送请求

xhr.send(null);

}

POST请求javascript

//原生AJAXPOST请求

functionajaxPost(url,data,success,error){

constxhr=newXMLHttpRequest();

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

xhr.timeout=5000;

//设置POST请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status>=200&&xhr.status<300){

constres=JSON.parse(xhr.respo