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

AJAX高频面试题及详细答案（实战面试版）前言：本套题目汇总前端求职中AJAX核心高频面试考点，覆盖基础概念、原理、请求流程、异常处理、跨域、手写实现、新旧方案对比等核心内容，答案贴合职场面试答题标准，通俗易懂、侧重实战，适合前端面试刷题、知识点复盘。一、基础概念选择题（共5题）1、以下关于AJAX的说法正确的是（）A、AJAX是一种全新的编程语言B、AJAX可以实现页面无刷新更新数据C、AJAX必须依赖服务器才能运行，本地无法调试D、AJAX只能发送GET请求答案：B详细解析：AJAX不是编程语言，是一套异步交互的技术方案，核心是利用浏览器内置对象实现客户端与服务器异步通信，做到局部刷新页面，无需重载整个页面。A错误，AJAX基于JavaScript、XML、HTML等现有技术；C错误，本地搭建简易服务即可调试；D错误，AJAX支持GET、POST、PUT、DELETE等多种请求方式。2、AJAX的核心对象是（）A、windowB、documentC、XMLHttpRequestD、location答案：C详细解析：XMLHttpRequest（简称XHR）是传统AJAX技术的核心对象，浏览器通过该对象创建异步请求、发送数据、接收服务器响应，完成前后端异步交互，其余选项均为浏览器全局对象，和AJAX核心逻辑无关。3、以下不属于AJAX请求优势的是（）A、局部刷新页面，提升用户体验B、减少无效网络请求，节省带宽C、页面无刷新，无需重新加载资源D、可以直接绕过浏览器跨域限制答案：D详细解析：AJAX严格受浏览器同源策略限制，跨域请求会被浏览器拦截，无法直接绕过，必须通过后端配置、代理、JSONP等方案解决。ABC均是AJAX最核心的实战优势，也是项目中普遍使用AJAX的主要原因。4、XMLHttpRequest状态码readyState为4代表的含义是（）A、请求未初始化B、请求正在发送C、服务器正在处理请求D、请求完成，响应数据接收完毕答案：D详细解析：readyState是XHR请求状态标识，共5个状态：0=未初始化，1=请求建立，2=请求已发送，3=正在接收响应数据，4=请求全部完成、数据接收完毕，也是我们日常监听请求成功的核心状态。5、浏览器同源策略中，不属于同源的是（）A、协议、域名、端口全部一致B、http://localhost:8080和:8080C、和D、同一域名、同一端口、不同页面路径答案：C详细解析：同源判定标准为协议、域名、端口三者完全一致，缺一不可。C选项一个是http协议、一个是https协议，协议不同，属于跨域请求；B本地地址在常规开发场景中视为同源，D仅路径不同不影响同源判定。二、判断题（共5题）1、AJAX是同步请求，必须等待请求完成后才能执行后续代码。（）答案：错误详细解析：AJAX默认是异步请求，发送请求后不会阻塞主线程，后续代码可直接执行，待服务器返回数据后触发回调函数处理结果。同时XHR也支持开启同步模式，但同步请求会阻塞页面渲染，开发中基本不使用。2、GET请求可以通过请求头携带参数，POST请求通过请求体携带参数。（）答案：正确详细解析：常规规范中，GET参数拼接在URL地址栏中，无请求体；POST核心通过请求体传递参数，适合传递大量数据、敏感数据，二者均可自定义请求头传递额外参数。3、只要后端返回状态码200，就代表AJAX请求业务逻辑一定成功。（）答案：错误详细解析：HTTP状态码200仅代表网络请求通信成功，不代表业务逻辑成功。很多后端接口会在200状态下，通过返回自定义code码区分业务成功、失败，需要前端二次判断业务状态。4、Fetch是新一代异步请求方案，本质是AJAX的替代方案。（）答案：正确详细解析：传统AJAX基于XHR对象，Fetch是ES6推出的原生异步请求API，语法更简洁、基于Promise，规避了XHR回调地狱问题，现代开发中已逐步替代传统AJAX，属于新版的前端异步通信方案。5、JSONP可以解决所有的跨域问题，支持POST请求跨域。（）答案：错误详细解析：JSONP原理是利用script标签不受同源策略限制的特性实现跨域，仅支持GET请求，无法处理POST请求，且只能解决简单接口跨域，无法处理携带cookie、复杂请求的跨域场景。三、核心简答题（共8题，面试高频）1、简单说说什么是AJAX，核心作用是什么？参考答案：AJAX全称异步JavaScript和XML，是一种前端异步数据交互技术。核心原理是通过浏览器内置的XHR或FetchAPI，在不刷新整个页面的前提下，与后端服务器建立通信，发送请求、接收数据，最后通过JS局部更新页面内容。核心作用主要有两点：一是实现页面局部刷新，提升用户操作体验，避免整页刷新造成的卡顿、状态丢失；二是实现前后端分离交互，前端专注页面展示，后端专注数据处理，提升开发效率。2、简述AJAX完整的请求执行流程参考答案：第一步：创建XMLHttpRequest实例对象，建立请求载体；第二步：调用open()方法，配置请求方式、接口地址、是否异步；第三步：按需设置请求头，常见如配置参数格式、token令牌；第四步：绑定onreadystatechange监听事件，监听请求状态变化；第五步：调用send()方法，发送请求到服务器，GET请求参数可写在URL，POST参数传入send内部；第六步：服务器处理请求后返回数据，浏览器接收响应，触发监听事件；第七步：判断readyState为4、HTTP状态码为200，解析数据并更新页面，异常则捕获错误。3、GET和POST请求的核心区别（面试必背）参考答案：1、参数位置不同：GET参数拼接在URL后面，POST参数放在请求体中；2、安全性不同：GET参数暴露在地址栏、历史记录中，安全性低；POST参数隐藏在请求体，相对安全；3、数据大小限制：GET受浏览器URL长度限制，无法传递大量数据；POST无明确大小限制，适合传表单、文件等大数据；4、缓存机制：GET请求默认会被浏览器缓存，重复请求会读取缓存数据；POST不会主动缓存；5、书签收藏：GET地址可收藏为书签，POST无法收藏。4、什么是浏览器跨域？跨域产生的原因和常见解决方案？参考答案：跨域指前端请求的接口地址，与当前页面的协议、域名、端口三者任意一个不一致，就会触发浏览器同源策略拦截，请求无法正常获取数据。产生原因：浏览器为了安全，防止恶意网站窃取本地数据、Cookie等信息，设置同源策略限制跨域通信。常见解决方案：1、后端配置CORS跨域资源共享，设置响应头允许前端域名跨域（企业最常用）；2、开发环境配置本地代理，借助脚手架代理转发请求，规避跨域；3、使用JSONP解决简单GET跨域场景；4、后端搭建中间层接口转发请求。5、Fetch和传统AJAX（XHR）的区别？参考答案：1、语法层面：XHR基于回调函数，多层请求容易出现回调地狱；Fetch基于Promise，支持async/await，代码更简洁优雅；2、兼容性：XHR兼容所有低版本浏览器，兼容性极佳；Fetch不支持IE浏览器；3、错误处理：XHR可以精准监听请求超时、网络错误、状态码错误；Fetch仅在网络彻底失败时报错，404、500等业务错误不会触发reject，需要手动判断状态码；4、功能支持：Fetch原生支持流式数据、跨域高级配置，更适配现代项目；XHR配置繁琐，原生功能单一。6、AJAX如何处理请求超时和网络异常？参考答案：传统XHR可通过timeout属性设置超时时间，搭配ontimeout事件监听超时回调；通过onerror事件捕获网络断开、接口地址错误等网络异常。Fetch可通过AbortController控制器设置请求超时、取消请求，通过try/catch捕获网络异常，同时手动判断响应状态码处理业务错误。项目实战中，一般会统一封装请求，配置超时时间、重复请求拦截、异常提示，提升项目稳定性。7、什么是回调地狱？AJAX如何解决这个问题？参考答案：多个AJAX请求存在依赖关系时，后一个请求需要依赖前一个请求的结果，就会出现多层回调函数嵌套的代码结构，代码层级深、可读性差、难以维护，这就是回调地狱。解决方案：早期通过Promise封装AJAX请求，扁平化代码；现代开发直接使用Fetch+async/await语法，将异步代码改写成同步写法，彻底解决回调地狱问题，代码简洁易维护。8、AJAX请求为什么需要序列化参数？什么时候需要序列化？参考答案：前端传递的对象、数组数据无法直接被后端识别，序列化就是将JS对象转为后端可解析的字符串格式。常规场景：POST请求传递JSON格式数据时，需要用JSON.stringify()序列化对象；传递表单键值对参数时，需要将对象序列化为URL编码字符串。GET请求参数拼接URL时，浏览器会自动简单编码，复杂参数仍需手动序列化处理，避免参数乱码、解析失败。四、手写代码面试题（实战必考）1、手写原生AJAX（XHR）POST请求，带超时、异常处理参考答案：PlainText

//原生封装POST请求

functionajaxPost(url,data){

//创建XHR对象

constxhr=newXMLHttpRequest();

//配置请求方式和地址，异步请求

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

//设置请求头，传递json格式参数

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

//设置超时时间5秒

xhr.timeout=5000;

//超时监听

xhr.ontimeout=function(){

alert('请求超时，请重试');

};

//网络异常监听

xhr.onerror=function(){

alert('网络请求失败，请检查网络');

};

//监听请求状态变化

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

//网络请求成功

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

constres=JSON.parse(xhr.responseText);

console.log('请求结果',res);

}else{

alert('请求失败，状态码：'+xhr.status);

}

}

};

//发送请求，序列化参数

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

}

2、手写Fetch+async/await封装通用请求参考答案：PlainText

asyncfunctionhttpRequest(url,method='GET',data=null){

//配置请求参数

constconfig={

method:method,

headers:{

'Content-Type':'application/json;charset=utf-8'

}

};

//POST请求添加请求体

if(method==='POST'&&data){

config.body=JSON.stringify(data);

}

try{

//发送请求

constres=awaitfetch(url,config);

//手动判断请求状态

if(!res.ok){

thrownewError('请求错误：'+res.status);

}

//解析返回数据

returnawaitres.json();

}catch(error){

console.error('请求异常',error);

throwerror;

}

}

五、面试延伸高频问答1、为什么POST请求会出现预检请求？答案解析：浏览器会将请求分为简单请求和复杂请求