AJAX 面试题及详细答案（实战完整版）

AJAX面试题及详细答案（实战完整版）一、基础概念题1.什么是AJAX？核心作用是什么？参考答案：AJAX全称异步JavaScript和XML，并不是一门新的编程语言，而是一套前端异步交互技术方案。核心是通过浏览器内置的XMLHttpRequest/Fetch对象，在不刷新整个页面的前提下，和服务器进行数据通信。核心作用：实现局部刷新页面，无需整页重载异步请求数据，不阻塞页面渲染和用户操作提升页面交互体验，实现动态数据更新（搜索联想、表单验证、分页加载等）2.AJAX的最大优势和缺点分别是什么？参考答案：优势：异步通信，用户操作无卡顿，页面体验流畅局部刷新，减少网络资源浪费，提升加载速度可以按需请求数据，不用刷新页面即可更新内容缺点：存在跨域问题，浏览器同源策略限制不同域名的请求异步请求无刷新，浏览器不会记录历史记录，前进后退功能失效搜索引擎爬虫无法抓取异步加载的内容，不利于SEO网络异常、超时、重复请求需要手动做兼容处理3.AJAX同步和异步的区别？实际开发用哪个？参考答案：AJAX请求有同步和异步两种模式，由open方法第三个参数决定：true异步、false同步。异步（true，默认）：发送请求后，代码不会等待接口返回结果，直接继续执行后续代码接口响应成功后，触发回调函数处理数据不会阻塞页面渲染、用户点击、输入等操作同步（false）：发送请求后，代码阻塞等待，直到接口返回结果才会继续执行后续代码请求期间页面卡死、无法操作，体验极差开发规范：99%场景全部使用异步，同步请求仅极少数特殊场景使用，日常开发禁止使用同步AJAX。二、核心原理与状态码4.简述AJAX完整请求流程参考答案：创建请求对象：实例化XMLHttpRequest（兼容低版本IE可使用ActiveXObject）初始化请求参数：调用open()方法，配置请求方式、接口地址、是否异步监听状态变化：绑定onreadystatechange事件，监听请求状态变更发送请求：调用send()方法，向服务器发送请求（GET传参在URL，POST传参在send内）处理响应结果：状态码为4、HTTP状态码为200时，解析后端返回数据，更新页面5.readyState五个状态分别代表什么？参考答案：readyState用来标识AJAX请求的当前执行阶段，共5个状态：0：未初始化，仅创建了XHR对象，未调用open()1：请求已建立，调用了open()，未调用send()2：请求已发送，响应头和响应状态已接收，响应体未返回3：正在接收响应数据，部分数据已返回，未接收完毕4：请求完全完成，所有数据接收完毕，可以正常处理结果实际开发中，我们只判断readyState===4，代表请求流程结束。6.HTTP状态码200、304、404、403、500分别含义参考答案：200：请求成功，服务器正常返回数据304：缓存命中，资源未更新，直接读取浏览器本地缓存403：权限不足，服务器拒绝访问（未登录、token失效、权限不够）404：接口地址不存在、路径错误、后端路由未配置500：服务器内部错误，后端代码报错、数据库异常三、GET/POST区别与实操7.AJAX中GET和POST请求的核心区别参考答案：传参方式不同：GET参数拼接在URL末尾；POST参数放在请求体中数据长度限制：GET受浏览器URL长度限制，无法传大数据；POST无长度限制缓存机制：GET请求会被浏览器缓存，多次请求同一地址会读取缓存；POST默认不缓存安全性：GET参数暴露在地址栏，不安全；POST参数在请求体，相对安全用途不同：GET用于查询数据；POST用于提交、新增、修改数据8.POST请求为什么需要设置请求头Content-Type？常用值有哪些？参考答案：POST请求数据存放在请求体中，后端需要通过Content-Type识别数据格式，否则无法正常解析参数。常用两种格式：application/x-www-form-urlencoded：默认格式，键值对格式，适合普通表单提交application/json：JSON格式，前后端分离项目最常用，传递复杂对象、数组数据四、跨域问题（高频面试）9.什么是跨域？为什么会出现跨域？参考答案：跨域是指浏览器发起的AJAX请求，协议、域名、端口号三者任意一个和当前页面地址不一致，就会触发跨域。产生原因：浏览器同源策略的安全限制，目的是防止恶意网站窃取用户数据、攻击后台接口，禁止非同源页面的请求交互。10.前端常见的跨域解决方案有哪些？优缺点？参考答案：1.CORS跨域资源共享（主流方案）后端配置响应头，允许指定域名跨域访问。优点：前端零改动、兼容性好、支持所有请求方式；缺点：需要后端配合修改代码。2.代理跨域（开发环境常用）Vue/React项目中配置vite/webpack代理，本地请求转发到后端接口。优点：开发调试方便，无需后端改代码；缺点：仅适用于本地开发，打包上线无效。3.JSONP利用script标签不受跨域限制的特性实现数据请求。优点：兼容极低版本浏览器；缺点：仅支持GET请求、不安全、无法传输复杂数据，现在基本淘汰。4.Nginx反向代理服务器配置Nginx，统一域名端口，规避跨域。优点：性能好、稳定、无需改前后端代码；缺点：需要运维配置服务器。五、项目实战易错点11.如何解决AJAX重复请求问题？参考答案：场景：用户频繁点击按钮、快速切换选项，导致多次发起相同接口请求，造成数据错乱、接口压力大。解决方案：加载锁：请求发起时设置loading状态，请求结束前禁止再次点击取消上一次请求：通过xhr.abort()终止未完成的上一次请求防抖处理：短时间多次触发，只执行最后一次请求（搜索联想常用）12.如何处理AJAX请求超时和网络异常？参考答案：XHR对象提供专属超时和异常监听：timeout：设置请求超时时间（毫秒）ontimeout：超时回调，提示用户网络超时onerror：网络异常回调，处理断网、接口不通场景开发中必须配置，避免用户无感知等待，提升容错性。13.AJAX和Fetch的区别？参考答案：底层差异：AJAX基于XHR；Fetch是ES6全新API，基于Promise语法体验：Fetch语法简洁，支持async/await，回调更优雅；XHR代码繁琐，多为回调嵌套异常处理：Fetch只识别网络错误，HTTP4xx/5xx不会报错，需要手动判断状态码；XHR可直接监听状态兼容性：Fetch不支持IE；XHR兼容所有浏览器功能差异：Fetch不支持请求超时、进度监听（原生较麻烦）；XHR原生支持超时、上传下载进度六、手写代码面试题14.手写原生AJAXGET请求（完整版）参考答案：javascript

//原生GET请求

functionajaxGet(url,callback){

//1.创建XHR对象

letxhr=newXMLHttpRequest();

//2.初始化请求

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

//3.监听状态变化

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

//请求成功，返回数据

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

}else{

console.log("请求失败",xhr.status);

}

}

};

//设置超时时间

xhr.timeout=5000;

xhr.ontimeout=function(){

console.log("请求超时");

};

//4.发送请求

xhr.send(null);

}

15.手写原生AJAXPOST请求（JSON格式）参考答案：javascript

//原生POST请求传JSON数据

functionajaxPost(url,data,callback){

letxhr=newXMLHttpRequest();

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

//设置请求头为JSON格式

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

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

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

}

}

};

//超时处理

xhr.timeout=5000;

xhr.ontimeout=()=>console.log("请求超时");

//发送JSON格式数据

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

}

七、进阶面试题16.AJAX异步回调地狱怎么解决？参考答案：多个AJAX请求嵌套调用时，会出现回调嵌套层级过深、代码难以维护的问题，也就是回调地狱。解决方案（从旧到新）：Promise封装AJAX：将回调改为Promise链式调用，扁平化代码async/await：基于Prom