企业官网建设流程全解析

网站域名到期怎么续费,沈阳网站建设seo优化,用python怎么做网站,网站搭建策划书前端萌新别慌#xff1a;30分钟搞懂AJAX#xff0c;告别页面刷新式开发#xff08;附实战套前端萌新别慌#xff1a;30分钟搞懂AJAX#xff0c;告别页面刷新式开发#xff08;附实战套路#xff09;为啥每次点个按钮整个页面都要“哗”一下重载#xff1f;AJAX到底是个…前端萌新别慌30分钟搞懂AJAX告别页面刷新式开发附实战套前端萌新别慌30分钟搞懂AJAX告别页面刷新式开发附实战套路为啥每次点个按钮整个页面都要“哗”一下重载AJAX到底是个啥神仙技术能让网页悄悄和服务器“私聊”浏览器背后的悄悄话XMLHttpRequest 和 fetch 的前世今生1. 老牌 XMLHttpRequest简称 XHR2. 新晋网红 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 直接写在 useEffectVue 里忘记销毁事件或清理请求遇到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 了可名字还是祖传就像“熊猫”其实是熊不是猫大家叫顺口了懒得改。核心就三步浏览器开个后门XMLHttpRequest 或 fetch后端把数据塞到响应里JSON、文本、二进制都行前端拿到数据后局部更新 DOM用户毫无知觉说人话页面不动数据偷偷跑用户体验丝滑到飞起。浏览器背后的悄悄话XMLHttpRequest 和 fetch 的前世今生1. 老牌 XMLHttpRequest简称 XHR// 最原始的 XHR像老奶奶的缝纫机能干活但吵得慌constxhrnewXMLHttpRequest();xhr.open(GET,/api/user?id8);xhr.onreadystatechangefunction(){// 状态 4 响应完毕if(xhr.readyState4xhr.status200){constuserJSON.parse(xhr.responseText);document.querySelector(#name).textContentuser.name;}};xhr.send();看到那一坨onreadystatechange没当年我抄这段代码把readyState抄成redayState调了俩小时没数据差点把键盘砸了。2. 新晋网红 fetch// fetch 像共享单车扫一下就能走fetch(/api/user?id8).then(res{if(!res.ok)thrownewError(网络抖动);returnres.json();}).then(user{document.querySelector(#name).textContentuser.name;}).catch(err{console.error(老板接口又挂了,err);});fetch 返回的是 Promise链式调用爽到飞起但别忘了默认不带 cookie想带凭证得加fetch(/api/user,{credentials:include});手把手拆解AJAX核心三件套请求怎么发数据怎么带头信息咋配GET 系列——把参数挂 URL 上像快递单贴包裹// 手写 query 字符串容易少 constparamsnewURLSearchParams({id:8,type:hot});fetch(/api/articles?${params});POST 系列——把数据藏口袋里bodyconstdata{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?id6删除/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(usergetArticles(user.id)).then(articlesgetComments(articles[0].id)).then(render).catch(econsole.error(哪一步炸了呢,e));async/await——语法糖甜到齁asyncfunctionloadPage(){try{constuserawaitgetUser(userId);constarticlesawaitgetArticles(user.id);constcommentsawaitgetComments(articles[0].id);render(comments);}catch(e){console.error(一步到位抓错误,e);}}AJAX的甜与痛优点多到爆坑也埋得深甜无刷新用户不感知体验丝滑省流量只拿数据不拿整页 HTML前后端解耦后端专心写接口前端专心画页面痛跨域前端原地 8080后端 3000浏览器直接 403SEO 不友好蜘蛛不跑 JS页面空壳后退按钮失效单页应用里路由得自己管跨域问题能让你凌晨三点还在抓头发浏览器安全策略协议域名端口 任一不同都算跨域。解决套路CORS后端加响应头Access-Control-Allow-Origin: https://www.xiaochengxu.com Access-Control-Allow-Credentials: trueJSONP老古董只支持 GET现在基本弃疗代理转发开发阶段最香// 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放哪儿最安全登录后后端返 token前端存哪儿localStorage永久有效XSS 就能偷sessionStorage标签页关了就丢cookie设HttpOnly防 XSS但得配 CSRF 令牌统一拦截器给所有请求塞 token// Axios 版axios.interceptors.request.use(config{config.headers.AuthorizationBearer${getToken()};returnconfig;});响应拦截器自动跳登录axios.interceptors.response.use(resres,err{if(err.response?.status401){localStorage.clear();location.href/login;}returnPromise.reject(err);});表单提交、搜索建议、无限滚动——全是AJAX在背后扛搜索建议debounce 省流量lettimernull;input.addEventListener(input,e{clearTimeout(timer);timersetTimeout(async(){constlistawaitfetch(/api/search?q${e.target.value}).then(rr.json());renderSuggest(list);},300);});无限滚动IntersectionObserverconstionewIntersectionObserver(entries{if(entries[0].isIntersecting)loadMore();},{threshold:1});io.observe(document.querySelector(.scroll-anchor));和Vue/React配合时哪些写法会拖慢性能React 里把await直接写在useEffectuseEffect(async(){// ❌ 会报 warningconstdataawaitfetchData();setData(data);},[]);正确姿势useEffect((){letignorefalse;(async(){constdataawaitfetchData();if(!ignore)setData(data);})();return()(ignoretrue);// 组件卸载别乱 setState},[]);Vue 里忘记销毁事件或清理请求exportdefault{data(){return{list:[]};},asyncmounted(){this.listawaitgetList();// 组件被缓存后再次进入会重复请求}};遇到AJAX失灵怎么办我的排错流水账网络面板看懵了教你快速定位是前端发错还是后端崩了打开 Chrome DevTools → Network → 看 Status(blocked:mixed-content) 你 HTTPS 页面调了 HTTP 接口304 缓存命中后端没返回新数据502 网关超时去找运维喝奶茶看 Timingstalled 时间过长队列堵塞可能同域名并发太多TTFB 高后端慢前端背锅没用401、403、500……这些状态码背后的真实故事码含义排查段子401未授权token 忘带或过期后端把你当陌生人403禁止访问有 token 但权限不够普通用户想删库500服务器内部错误后端小哥把空指针当 featureCORS错误别只会复制Stack Overflow先看这三步看报错信息哪个域名被挡让后端加Access-Control-Allow-Origin带 cookie 时后端再补Allow-Credentials且 Origin 不能为*AJAX老司机私藏技巧统一请求封装少写80%重复代码functionrequest(url,options{}){constbaseURLhttps://api.xiaochengxu.com;returnfetch(baseURLurl,{...options,headers:{Content-Type:application/json,...options.headers}}).then(res{if(!res.ok)thrownewError(res.statusText);returnres.json();});}// 使用request(/user).then(console.log);加载中、失败重试、防重复提交——这些细节用户超在意防抖重复点击letpendingnewSet();asyncfunctionsubmit(data){constkeyJSON.stringify(data);if(pending.has(key))return;pending.add(key);try{awaitfetch(/api/submit,{method:POST,body:JSON.stringify(data)});}catch(e){// 失败重试awaitnewPromise(resolvesetTimeout(resolve,1000));returnsubmit(data);}finally{pending.delete(key);}}加载占位button.innerHTMLspan classspinner/span提交中...;fetch(...).finally((){button.innerHTML提交;});用AbortController优雅取消请求别让旧请求捣乱constcontrollernewAbortController();fetch(/api/search?qajax,{signal:controller.signal}).catch(err{if(err.nameAbortError)return;// 用户主动取消throwerr;});// 用户输入新关键字旧请求直接掐掉controller.abort();AJAX之外的世界它还没过时但你得知道新玩法fetch API真香警告但IE用户还在哭IE11 连 Promise 都不原生fetch 更是别想。要兼容就得靠 polyfillwhatwg-fetch es6-promise一引就是 20 KB老板让减包体积时你头很大。Axios是不是必须用什么时候自己封装更爽Axios 优点自带拦截器、超时、自动 JSON 化浏览器 Node 两端通吃缺点体积 13 KB只发 GET 请求都觉得亏更新慢issue 堆成山我的土味定律小项目 只调几个接口 → 原生 fetch 一把梭大团队 统一拦截错误 → Axios 真香未来会不会被WebSocket或SSE取代咱聊聊趋势WebSocket全双工实时游戏、在线协作但长连接费资源SSEServer-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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进