news 2026/4/18 8:13:48

前端萌新别慌：30分钟搞懂AJAX，告别页面刷新式开发（附实战套

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端萌新别慌：30分钟搞懂AJAX，告别页面刷新式开发（附实战套


前端萌新别慌：30分钟搞懂AJAX，告别页面刷新式开发（附实战套

  • 前端萌新别慌：30分钟搞懂AJAX，告别页面刷新式开发（附实战套路）
    • 为啥每次点个按钮整个页面都要“哗”一下重载？
    • AJAX到底是个啥神仙技术，能让网页悄悄和服务器“私聊”？
    • 浏览器背后的悄悄话：XMLHttpRequest 和 fetch 的前世今生
      • 1. 老牌 XMLHttpRequest（简称 XHR）
      • 2. 新晋网红 fetch
    • 手把手拆解AJAX核心三件套
      • 请求怎么发？数据怎么带？头信息咋配？
        • GET 系列——把参数挂 URL 上，像快递单贴包裹
        • POST 系列——把数据藏口袋里（body）
        • 自定义请求头——后端要验签名
    • GET、POST、PUT、DELETE——别再乱用了兄弟
    • 异步到底是啥意思？Promise、async/await 怎么让它不“回调地狱”
      • 回调地狱长这样：
      • Promise 链——把塔拉平
      • async/await——语法糖甜到齁
    • AJAX的甜与痛：优点多到爆，坑也埋得深
      • 甜
      • 痛
    • 跨域问题能让你凌晨三点还在抓头发
    • 缓存机制有时候“太聪明”，反而返回旧数据气死你
    • 项目里AJAX怎么用才不翻车
      • 登录态怎么带？Token放哪儿最安全？
    • 表单提交、搜索建议、无限滚动——全是AJAX在背后扛
      • 搜索建议（debounce 省流量）
      • 无限滚动（IntersectionObserver）
    • 和Vue/React配合时，哪些写法会拖慢性能
      • React 里把 `await` 直接写在 `useEffect`
      • Vue 里忘记销毁事件或清理请求
    • 遇到AJAX失灵怎么办？我的排错流水账
      • 网络面板看懵了？教你快速定位是前端发错还是后端崩了
      • 401、403、500……这些状态码背后的真实故事
    • CORS错误别只会复制Stack Overflow，先看这三步
    • AJAX老司机私藏技巧
      • 统一请求封装：少写80%重复代码
      • 加载中、失败重试、防重复提交——这些细节用户超在意
        • 防抖重复点击
        • 加载占位
      • 用AbortController优雅取消请求，别让旧请求捣乱
    • AJAX之外的世界：它还没过时，但你得知道新玩法
      • fetch API真香警告，但IE用户还在哭
      • Axios是不是必须用？什么时候自己封装更爽
      • 未来会不会被WebSocket或SSE取代？咱聊聊趋势

前端萌新别慌：30分钟搞懂AJAX，告别页面刷新式开发（附实战套路）

友情提示：本文全程碎碎念，代码管饱，看完还不会你来我家蹭饭。

为啥每次点个按钮整个页面都要“哗”一下重载？

先给你讲个真事。
我第一年上班，老板让我做一个“点赞”功能。我吭哧吭哧写了个<form>，按钮一点——整个页面“哗啦”白屏，3 秒后跳回来，点赞数 +1。
测试小姐姐当场懵逼：“我就点个赞，你刷新我抖音视频干嘛？”
那一刻，我悟了：原来用户只想让数字变一下，我却把人家房子炸了。

后来老司机告诉我：想局部刷新，得让浏览器偷偷发请求，别惊动用户。
这条“偷情”路线，就是 AJAX。

AJAX到底是个啥神仙技术，能让网页悄悄和服务器“私聊”？

先放一句话：AJAX 就是浏览器提供的“地下交通站”，让你在不刷新页面的情况下，跟后端换数据。
名字听着唬人：Asynchronous JavaScript And XML。
其实现在谁还用 XML 啊，早都 JSON 了，可名字还是祖传，就像“熊猫”其实是熊不是猫，大家叫顺口了懒得改。

核心就三步：

  1. 浏览器开个后门（XMLHttpRequest 或 fetch）
  2. 后端把数据塞到响应里（JSON、文本、二进制都行）
  3. 前端拿到数据后局部更新 DOM，用户毫无知觉

说人话：
页面不动，数据偷偷跑，用户体验丝滑到飞起。

浏览器背后的悄悄话：XMLHttpRequest 和 fetch 的前世今生

1. 老牌 XMLHttpRequest（简称 XHR）

// 最原始的 XHR，像老奶奶的缝纫机，能干活但吵得慌constxhr=newXMLHttpRequest();xhr.open('GET','/api/user?id=8');xhr.onreadystatechange=function(){// 状态 4 = 响应完毕if(xhr.readyState===4&&xhr.status===200){constuser=JSON.parse(xhr.responseText);document.querySelector('#name').textContent=user.name;}};xhr.send();

看到那一坨onreadystatechange没？当年我抄这段代码，把readyState抄成redayState，调了俩小时没数据，差点把键盘砸了。

2. 新晋网红 fetch

// fetch 像共享单车，扫一下就能走fetch('/api/user?id=8').then(res=>{if(!res.ok)thrownewError('网络抖动');returnres.json();}).then(user=>{document.querySelector('#name').textContent=user.name;}).catch(err=>{console.error('老板，接口又挂了：',err);});

fetch 返回的是 Promise，链式调用爽到飞起，但别忘了默认不带 cookie，想带凭证得加：

fetch('/api/user',{credentials:'include'});

手把手拆解AJAX核心三件套

请求怎么发？数据怎么带？头信息咋配？

GET 系列——把参数挂 URL 上，像快递单贴包裹
// 手写 query 字符串，容易少 &constparams=newURLSearchParams({id:8,type:'hot'});fetch(`/api/articles?${params}`);
POST 系列——把数据藏口袋里（body）
constdata={title:'AJAX 踩坑指北',content:'写太多字了'};fetch('/api/articles',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
自定义请求头——后端要验签名
fetch('/api/secure',{headers:{'X-Client-Version':'1.2.3','Authorization':`Bearer${localStorage.token}`}});

GET、POST、PUT、DELETE——别再乱用了兄弟

动词幂等含义场景举例
GET是只读查文章列表
POST否创建资源发帖子、上传文件
PUT是全量更新把整篇博客重新保存一遍
PATCH否局部更新只改标题不改正文
DELETE是删除删评论

别再把“删除”用 GET 实现，运维大哥会追着你打：

<!-- 大忌：删除按钮点一下，浏览器地址栏直接暴露 --><ahref="/deleteArticle?id=6">删除</a>

正确姿势：

fetch('/api/articles/6',{method:'DELETE'});

异步到底是啥意思？Promise、async/await 怎么让它不“回调地狱”

回调地狱长这样：

getUser(userId,function(user){getArticles(user.id,function(articles){getComments(articles[0].id,function(comments){render(comments);// 塔型代码，俗称“死亡金字塔”});});});

Promise 链——把塔拉平

getUser(userId).then(user=>getArticles(user.id)).then(articles=>getComments(articles[0].id)).then(render).catch(e=>console.error('哪一步炸了呢？',e));

async/await——语法糖甜到齁

asyncfunctionloadPage(){try{constuser=awaitgetUser(userId);constarticles=awaitgetArticles(user.id);constcomments=awaitgetComments(articles[0].id);render(comments);}catch(e){console.error('一步到位抓错误',e);}}

AJAX的甜与痛：优点多到爆，坑也埋得深

甜

  • 无刷新：用户不感知，体验丝滑
  • 省流量：只拿数据，不拿整页 HTML
  • 前后端解耦：后端专心写接口，前端专心画页面

痛

  • 跨域：前端原地 8080，后端 3000，浏览器直接 403
  • SEO 不友好：蜘蛛不跑 JS，页面空壳
  • 后退按钮失效：单页应用里路由得自己管

跨域问题能让你凌晨三点还在抓头发

浏览器安全策略：协议+域名+端口 任一不同都算跨域。
解决套路：

  1. CORS（后端加响应头）
Access-Control-Allow-Origin: https://www.xiaochengxu.com Access-Control-Allow-Credentials: true

  1. JSONP（老古董，只支持 GET，现在基本弃疗）

  2. 代理转发（开发阶段最香）

// vue.config.jsdevServer:{proxy:{'/api':{target:'http://localhost:3000',changeOrigin:true}}}

缓存机制有时候“太聪明”，反而返回旧数据气死你

浏览器默认缓存 GET 请求，有时候后端数据更新了，前端还是老数据。
秒解：在 URL 上戳个时间戳

fetch(`/api/articles?t=${Date.now()}`);

或者后端把缓存头拍死：

Cache-Control: no-cache

项目里AJAX怎么用才不翻车

登录态怎么带？Token放哪儿最安全？

  1. 登录后后端返 token，前端存哪儿？

    • localStorage：永久有效，XSS 就能偷
    • sessionStorage：标签页关了就丢
    • cookie：设HttpOnly防 XSS，但得配 CSRF 令牌

  2. 统一拦截器给所有请求塞 token

// Axios 版axios.interceptors.request.use(config=>{config.headers.Authorization=`Bearer${getToken()}`;returnconfig;});
  1. 响应拦截器自动跳登录
axios.interceptors.response.use(res=>res,err=>{if(err.response?.status===401){localStorage.clear();location.href='/login';}returnPromise.reject(err);});

表单提交、搜索建议、无限滚动——全是AJAX在背后扛

搜索建议（debounce 省流量）

lettimer=null;input.addEventListener('input',e=>{clearTimeout(timer);timer=setTimeout(async()=>{constlist=awaitfetch(`/api/search?q=${e.target.value}`).then(r=>r.json());renderSuggest(list);},300);});

无限滚动（IntersectionObserver）

constio=newIntersectionObserver(entries=>{if(entries[0].isIntersecting)loadMore();},{threshold:1});io.observe(document.querySelector('.scroll-anchor'));

和Vue/React配合时，哪些写法会拖慢性能

React 里把await直接写在useEffect

useEffect(async()=>{// ❌ 会报 warningconstdata=awaitfetchData();setData(data);},[]);

正确姿势：

useEffect(()=>{letignore=false;(async()=>{constdata=awaitfetchData();if(!ignore)setData(data);})();return()=>(ignore=true);// 组件卸载别乱 setState},[]);

Vue 里忘记销毁事件或清理请求

exportdefault{data(){return{list:[]};},asyncmounted(){this.list=awaitgetList();// 组件被缓存后再次进入会重复请求}};

遇到AJAX失灵怎么办？我的排错流水账

网络面板看懵了？教你快速定位是前端发错还是后端崩了

  1. 打开 Chrome DevTools → Network → 看 Status

    • (blocked:mixed-content) 你 HTTPS 页面调了 HTTP 接口
    • 304 缓存命中，后端没返回新数据
    • 502 网关超时，去找运维喝奶茶

  2. 看 Timing

    • stalled 时间过长：队列堵塞，可能同域名并发太多
    • TTFB 高：后端慢，前端背锅没用

401、403、500……这些状态码背后的真实故事

码含义排查段子
401未授权token 忘带或过期，后端把你当陌生人
403禁止访问有 token 但权限不够，普通用户想删库
500服务器内部错误后端小哥把空指针当 feature

CORS错误别只会复制Stack Overflow，先看这三步

  1. 看报错信息：哪个域名被挡
  2. 让后端加Access-Control-Allow-Origin
  3. 带 cookie 时，后端再补Allow-Credentials且 Origin 不能为*

AJAX老司机私藏技巧

统一请求封装：少写80%重复代码

functionrequest(url,options={}){constbaseURL='https://api.xiaochengxu.com';returnfetch(baseURL+url,{...options,headers:{'Content-Type':'application/json',...options.headers}}).then(res=>{if(!res.ok)thrownewError(res.statusText);returnres.json();});}// 使用request('/user').then(console.log);

加载中、失败重试、防重复提交——这些细节用户超在意

防抖重复点击
letpending=newSet();asyncfunctionsubmit(data){constkey=JSON.stringify(data);if(pending.has(key))return;pending.add(key);try{awaitfetch('/api/submit',{method:'POST',body:JSON.stringify(data)});}catch(e){// 失败重试awaitnewPromise(resolve=>setTimeout(resolve,1000));returnsubmit(data);}finally{pending.delete(key);}}
加载占位
button.innerHTML='<span class="spinner"></span>提交中...';fetch(...).finally(()=>{button.innerHTML='提交';});

用AbortController优雅取消请求，别让旧请求捣乱

constcontroller=newAbortController();fetch('/api/search?q=ajax',{signal:controller.signal}).catch(err=>{if(err.name==='AbortError')return;// 用户主动取消throwerr;});// 用户输入新关键字，旧请求直接掐掉controller.abort();

AJAX之外的世界：它还没过时，但你得知道新玩法

fetch API真香警告，但IE用户还在哭

IE11 连 Promise 都不原生，fetch 更是别想。
要兼容就得靠 polyfill：whatwg-fetch + es6-promise，一引就是 20 KB，老板让减包体积时你头很大。

Axios是不是必须用？什么时候自己封装更爽

Axios 优点：

  • 自带拦截器、超时、自动 JSON 化
  • 浏览器 Node 两端通吃

缺点：

  • 体积 13 KB，只发 GET 请求都觉得亏
  • 更新慢，issue 堆成山

我的土味定律：

  • 小项目 + 只调几个接口 → 原生 fetch 一把梭
  • 大团队 + 统一拦截错误 → Axios 真香

未来会不会被WebSocket或SSE取代？咱聊聊趋势

  • WebSocket：全双工，实时游戏、在线协作，但长连接费资源
  • SSE（Server-Sent Events）：服务端单向推送，股票行情、日志大屏
  • AJAX：拉模型，一问一答，简单场景永远不过时

结论：三者不是谁干掉谁，而是各领风骚。
就像螺丝刀和电钻，工具箱里都得有。

写到这儿，我键盘已经冒烟，你如果能一口气看到这儿，估计也离 AJAX 老鸟不远了。
下次遇到“哗”一下刷新整页的产品经理需求，就把这篇文章甩给他，然后优雅地回一句：
“哥，咱用 AJAX，偷偷摸摸就能搞定，别再炸房子了。”

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）学习路线(点击解锁）知识定位
《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》持续更新中~Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》持续更新中~SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》持续更新中~算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》持续更新中~基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/3/29 17:41:12

Z-Image-Turbo多租户方案：SaaS服务快速上线

Z-Image-Turbo多租户方案&#xff1a;SaaS服务快速上线指南 如果你是一位创业者&#xff0c;想要打造一个AI图像生成平台服务多个客户&#xff0c;但担心资源隔离和计费问题&#xff0c;那么Z-Image-Turbo多租户方案正是你需要的现成解决方案。本文将详细介绍如何利用这套方案快…

作者头像 李华
网站建设 2026/4/16 17:17:25

懒人必备！阿里通义Z-Image-Turbo云端GPU环境一键配置方案

懒人必备&#xff01;阿里通义Z-Image-Turbo云端GPU环境一键配置方案 作为一名数字艺术家&#xff0c;你是否也遇到过这样的困境&#xff1a;听说AI能大幅提升创作效率&#xff0c;但手头的MacBook Pro根本无法运行需要GPU的AI模型&#xff1f;今天我要分享的阿里通义Z-Image-T…

作者头像 李华
网站建设 2026/4/18 0:17:07

Mochi Diffusion：Mac本地AI图像生成的完整指南

Mochi Diffusion&#xff1a;Mac本地AI图像生成的完整指南 【免费下载链接】MochiDiffusion Run Stable Diffusion on Mac natively 项目地址: https://gitcode.com/gh_mirrors/mo/MochiDiffusion 在人工智能创作工具日益普及的今天&#xff0c;Mochi Diffusion 为您提供…

作者头像 李华
网站建设 2026/4/16 15:16:42

计算机毕设java大学足球赛事管理系统设计 基于Java的高校足球赛事信息化管理平台设计 面向大学足球赛事的Java管理系统开发

计算机毕设java大学足球赛事管理系统设计0m8rh9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着信息技术的飞速发展&#xff0c;大学足球赛事的管理方式也在不断革新。传统的…

作者头像 李华
网站建设 2026/4/16 18:01:55

深度解析Etcher：跨平台USB启动盘制作工具的技术实现与应用指南

深度解析Etcher&#xff1a;跨平台USB启动盘制作工具的技术实现与应用指南 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 在当今数字化时代&#xff0c;系统维护和部署工作中&#xff0c;制作可…

作者头像 李华