你知道什么是 Ajax 吗？—— 从入门到原理，一篇彻底搞懂

你知道什么是 Ajax 吗—— 从入门到原理一篇彻底搞懂面试官“你知道什么是 Ajax 吗”你“……好像是用 JavaScript 发请求不刷新页面就能更新数据……”面试官“那你能说说它的工作原理和优缺点吗”你“emmm…”如果你对 Ajax 的理解还停留在 “异步请求” 四个字那这篇文章就是为你准备的。本文将从 Ajax 的诞生背景、核心概念、工作流程、底层原理XMLHttpRequest、代码示例、优缺点再到现代替代方案Fetch API、Axios带你全方位掌握 Ajax。一、为什么需要 Ajax—— 传统 Web 的痛点在 Ajax 出现之前约 2005 年之前Web 应用采用同步交互模式用户在表单填写数据点击提交。浏览器将整个页面数据发送给服务器。服务器处理完成后返回一个完整的新页面。浏览器重新加载整个页面。这种模式的缺点非常明显体验差哪怕只改一个数据也要刷新整个页面出现白屏等待。带宽浪费传输大量重复的 HTML 结构。交互不连贯例如填写表单时校验用户名是否可用必须提交整个页面后才能知道结果。Ajax 的出现让 Web 应用从“页面集”进化为“单页应用SPA”开启了 Web 2.0 时代。二、Ajax 的定义与全称Ajax Asynchronous JavaScript and XML异步的 JavaScript 与 XML 技术。注意虽然名字里有 XML但现在的 Ajax 通信绝大多数使用 JSON 格式XML 已经很少见了。Ajax不是一种编程语言也不是一个框架而是一套现有的 Web 技术的组合用于在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。三、Ajax 的核心技术组成AjaxHTML/CSSDOMJavaScriptXMLHttpRequest核心对象XML/JSON数据格式技术组件作用HTML/CSS呈现页面结构与样式DOM动态更新页面局部内容JavaScript驱动业务逻辑发起请求、处理响应XMLHttpRequestAjax 的核心——浏览器内置对象用于与服务器异步通信XML / JSON数据传输格式现代普遍使用 JSON四、Ajax 的工作流程附流程图服务器浏览器(JS)用户服务器浏览器(JS)用户用户可继续操作页面无阻塞触发事件点击、输入等创建 XMLHttpRequest 对象发送异步请求不刷新页面返回数据XML/JSON/文本解析数据更新 DOM页面局部刷新用户看到新内容详细步骤解释触发事件用户在页面上执行某个操作点击按钮、输入框失焦等。创建 XMLHttpRequest 对象JS 代码实例化XMLHttpRequest或ActiveXObject兼容老 IE。初始化请求调用open(method, url, async)指定请求方式、地址、是否异步通常为 true。设置回调函数监听onreadystatechange事件当readyState 4且status 200时处理响应数据。发送请求调用send(body)如果是 GET 请求 body 可为 null。服务器处理接收请求执行业务逻辑返回数据JSON/XML/文本。接收响应浏览器回调函数接收到数据。更新 DOM使用 JS 操作 DOM 元素更新页面局部内容。五、原生 Ajax 代码示例GET 请求// 1. 创建 XMLHttpRequest 对象varxhrnewXMLHttpRequest();// 2. 配置请求xhr.open(GET,https://api.example.com/users?id123,true);// 3. 监听状态变化xhr.onreadystatechangefunction(){if(xhr.readyState4){// 请求完成if(xhr.status200){// HTTP 成功vardataJSON.parse(xhr.responseText);console.log(data);// 更新页面 DOMdocument.getElementById(userName).innerTextdata.name;}else{console.error(请求失败,xhr.status);}}};// 4. 发送请求xhr.send();POST 请求带 JSON 数据varxhrnewXMLHttpRequest();xhr.open(POST,https://api.example.com/users,true);xhr.setRequestHeader(Content-Type,application/json);// 设置请求头xhr.onreadystatechangefunction(){if(xhr.readyState4xhr.status201){console.log(创建成功,JSON.parse(xhr.responseText));}};varpayloadJSON.stringify({name:张三,age:25});xhr.send(payload);六、XMLHttpRequest 的关键属性与方法属性/方法说明readyState0: UNSENT未初始化1: OPENED已调用open2: HEADERS_RECEIVED3: LOADING下载中4: DONE完成statusHTTP 状态码200, 404, 500 等statusText状态文本“OK”, “Not Found” 等responseText响应体字符串形式responseXML响应体XML 格式已解析为 Document 对象onreadystatechange状态改变时的回调函数open(method, url, async)初始化请求send(data)发送请求data 可选POST 时使用setRequestHeader(header, value)设置请求头必须在 open 之后、send 之前abort()终止请求七、Ajax 的优点与缺点✅ 优点无刷新更新只更新局部数据用户体验流畅。异步通信请求期间用户可与其他页面元素交互不阻塞。减少带宽消耗只传输必要的数据而不是整个页面。标准化支持所有现代浏览器都支持XMLHttpRequest。前后端分离为 RESTful API 和 SPA 奠定基础。❌ 缺点破坏浏览器后退/前进机制因为页面未整体刷新浏览器不会自动记录 Ajax 操作状态。解决方案使用pushStatereplaceStateHTML5 History API。SEO 不友好搜索引擎爬虫通常不会执行 JavaScript因此 Ajax 加载的内容可能无法被索引。解决方案服务端渲染SSR或预渲染。跨域问题默认受同源策略限制协议、域名、端口必须一致。解决方案CORS、JSONP仅限 GET、代理转发。增加代码复杂度需要处理请求状态、错误、竞争条件如异步顺序。安全问题可能暴露 API 端点增加 XSS、CSRF 风险。八、Ajax 的进化Fetch API 与 Axios随着现代前端发展XMLHttpRequest的写法已略显繁琐。现在更推荐使用Fetch API或Axios。8.1 Fetch API浏览器原生基于 Promise// GET 请求fetch(https://api.example.com/users?id123).then(response{if(!response.ok)thrownewError(HTTP error response.status);returnresponse.json();}).then(dataconsole.log(data)).catch(errorconsole.error(error));// POST 请求fetch(https://api.example.com/users,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({name:李四,age:30})}).then(resres.json()).then(dataconsole.log(data));Fetch 的优点基于 Promise避免回调地狱。语法更简洁。支持 Service Worker 和流式处理。Fetch 的注意点默认不会在 HTTP 错误状态如 404、500时 reject需要手动判断response.ok。默认不发送 cookies需要添加credentials: include。8.2 Axios第三方库功能更强大// GETaxios.get(/users,{params:{id:123}}).then(resconsole.log(res.data)).catch(errconsole.error(err));// POSTaxios.post(/users,{name:王五,age:28}).then(resconsole.log(res.data));Axios 优势自动转换 JSON 数据。请求/响应拦截器。支持取消请求、超时设置。在浏览器和 Node.js 环境通用。内置 XSRF 保护。九、Ajax 与 Fetch、Axios 的关系Ajax 技术概念底层API: XMLHttpRequest现代替代方案Fetch API浏览器原生Promise风格Axios第三方库功能最全手动管理状态、回调简洁但需处理边缘情况开箱即用适合复杂项目结论Ajax 是一个技术思想XMLHttpRequest是其经典实现Fetch和Axios是更现代的演进版本。十、常见面试题解析1. Ajax 与 Fetch 有什么区别对比项Ajax (XMLHttpRequest)Fetch异步处理回调函数 / onreadystatechangePromise语法复杂度较复杂简洁错误处理需要判断 status只网络错误 rejectHTTP 错误需手动默认携带 Cookie是否需 credentials: ‘include’请求取消支持 abort()需借助 AbortController进度监听支持上传/下载进度不支持但可配合 Streams2. jQuery 的 $.ajax 与原生 Ajax 是什么关系$.ajax是 jQuery 对原生XMLHttpRequest的封装提供了更友好的 API、自动数据转换、跨域支持JSONP等。随着现代框架React/Vue和 Fetch API 的普及jQuery 的 Ajax 已不再是首选。3. 如何用 Ajax 实现文件上传使用FormData对象varformDatanewFormData();formData.append(file,fileInput.files[0]);varxhrnewXMLHttpRequest();xhr.open(POST,/upload,true);xhr.send(formData);4. Ajax 请求如何设置超时xhr.timeout3000;// 3秒超时xhr.ontimeoutfunction(){console.error(请求超时);};十一、总结知识点核心内容定义异步 JavaScript 与 XML一套在无刷新下与服务器交换数据的技术组合核心对象XMLHttpRequest工作流程创建对象 → open → 设置回调 → send → 收到响应 → 更新 DOM优点刷新体验好、异步不阻塞、减少带宽、前后端分离缺点破坏浏览器历史、SEO 不友好、跨域限制、代码复杂度上升现代替代Fetch API、AxiosAjax 是 Web 前端发展史中里程碑式的技术。理解它的原理不仅能帮你应对面试更能让你在设计 API 交互时做出合理的技术选型。现在你能自信地回答 “你知道什么是 Ajax 吗” 了吧思考题假设你需要实现一个实时搜索输入框用户每输入一个字符就向服务器请求搜索结果。如果用户输入速度很快会发送大量请求如何避免过载和错序响应欢迎在评论区交流你的方案。