企业官网建设流程全解析

网站中留言板怎么做,网站推广哪个平台最好,名城苏州网首页,怎么推广店铺AJAX并不是一种独立的请求方法#xff0c;而是一种「前端异步请求数据、实现页面局部刷新」的技术思想/方案#xff0c;我们先厘清核心概念#xff0c;再详细说明AJAX的实现方式、历史演变及具体用法#xff1a; 一、先明确#xff1a;AJAX的本质与核心概念 1. AJAX的全…AJAX并不是一种独立的请求方法而是一种「前端异步请求数据、实现页面局部刷新」的技术思想/方案我们先厘清核心概念再详细说明AJAX的实现方式、历史演变及具体用法一、先明确AJAX的本质与核心概念1. AJAX的全称与定义AJAX Asynchronous JavaScript and XML异步JavaScript和XML它不是一种新的技术而是整合了「JavaScript、XMLHttpRequest、DOM、CSS」等现有技术的异步数据交互方案。2. AJAX的核心特点异步性请求发送后无需等待服务器响应前端可继续执行其他操作不会阻塞页面局部刷新服务器返回数据后仅更新页面的指定部分无需刷新整个页面提升用户体验数据交互实现前端与服务器的后台数据通信无需页面跳转早期数据格式最初以XML作为数据传输格式现在已普遍被JSON替代更简洁、易解析。3. 关键误区AJAX ≠ 具体请求工具很多人会混淆「AJAX」和「XMLHttpRequest/axios/fetch」它们的关系是AJAX技术思想/方案 异步数据交互 局部页面刷新 实现AJAX的工具/手段XMLHttpRequest原生、jQuery AJAX封装、axios现代封装、fetch现代原生简单说XMLHttpRequest/axios/fetch等都是AJAX思想的具体实现AJAX是这些工具的“上层思想”。二、AJAX的发展历程从经典到现代阶段核心实现工具特点时代背景早期AJAX2005年起XMLHttpRequest原生语法繁琐、需手动封装、兼容IE早期前端项目jQuery流行前经典AJAX2010年起jQuery AJAX封装语法简洁、跨浏览器兼容、内置常用功能jQuery主导的前端时代现代AJAX2015年起fetch原生、axios封装Promise化、语法简洁、功能完善、支持现代框架Vue/React等现代前端框架时代三、AJAX的3种核心实现方式附详细示例结合你的翻译场景我们分别演示「经典原生AJAXXHR」「jQuery AJAX」「现代AJAXaxios/fetch」的具体用法1. 经典原生AJAX基于XMLHttpRequest这是AJAX的最早实现方式也是所有AJAX工具的底层基础对应你之前问到的XMLHttpRequest/** * 原生XMLHttpRequest实现AJAX翻译请求 * 这是最早期的AJAX实现属于AJAX范畴 */exportfunctionajaxByXHR(query,fromauto,toen){returnnewPromise((resolve,reject){// 1. 前置校验if(!query?.trim()){reject(newError(请传入有效翻译文本));return;}// 2. 创建XHR实例AJAX的核心载体constxhrnewXMLHttpRequest();// 3. 配置请求异步请求第三个参数为trueconsturlhttp://localhost:3000/api/translate/baidu;xhr.open(POST,url,true);// 异步是AJAX的核心特性// 4. 设置请求头JSON格式xhr.setRequestHeader(Content-Type,application/json);// 5. 监听异步响应onreadystatechange是异步回调的核心xhr.onreadystatechangefunction(){// readyState4请求完成异步响应接收完毕if(xhr.readyState4){// 状态码200-299请求成功if(xhr.status200xhr.status300){try{// 早期用XML解析现在用JSON解析constdataJSON.parse(xhr.responseText);if(data.code!0){reject(newError(data.msg||翻译失败));return;}// 仅更新页面局部内容AJAX的局部刷新特性document.getElementById(translate-result).innerTextdata.data.text;resolve(data.data);}catch(err){reject(newError(响应解析失败err.message));}}else{reject(newError(请求失败${xhr.status}${xhr.statusText}));}}};// 6. 监听超时/错误xhr.ontimeout()reject(newError(请求超时));xhr.onerror()reject(newError(网络异常));// 7. 发送异步请求xhr.send(JSON.stringify({query,from,to}));});}2. 经典jQuery AJAX曾经的AJAX主流方案jQuery对原生XMLHttpRequest进行了封装简化了AJAX语法是过去很长一段时间的前端AJAX标配前置准备引入jQuery!-- CDN引入jQuery --scriptsrchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script完整示例/** * jQuery AJAX实现翻译请求经典AJAX方案 */functionajaxByJQuery(query,fromauto,toen){if(!query?.trim()){alert(请传入有效翻译文本);return;}// $.ajax()是jQuery封装的AJAX核心方法$.ajax({url:http://localhost:3000/api/translate/baidu,// 请求地址method:POST,// 请求方法dataType:json,// 预期响应数据格式自动解析JSONcontentType:application/json,// 请求体格式data:JSON.stringify({query,from,to}),// 请求数据timeout:8000,// 超时时间async:true,// 开启异步默认trueAJAX核心特性// 异步成功回调局部刷新页面success:function(data){if(data.code0){$(#translate-result).text(data.data.text);// 局部更新DOMconsole.log(jQuery AJAX翻译成功,data.data);}else{alert(翻译失败data.msg);}},// 异步失败回调error:function(xhr,status,error){console.error(jQuery AJAX失败,status,error);alert(请求失败请稍后重试);}});}// 调用// ajaxByJQuery(你好世界, auto, en);jQuery AJAX的简化写法// $.get()简化GET请求$.get(/api/public/info,function(data){$(#info).html(data.content);});// $.post()简化POST请求$.post(/api/translate/baidu,{query:你好,from:auto,to:en},function(data){$(#translate-result).text(data.data.text);},json);3. 现代AJAX基于axios/fetch随着Promise和现代前端框架的普及原生fetch和axios成为了现代AJAX的主流实现它们本质上依然是AJAX思想的延续异步请求局部刷新1axios实现现代AJAX推荐importaxiosfromaxios;/** * axios实现现代AJAX翻译请求 * axios是AJAX思想的现代封装保留异步局部刷新核心 */exportasyncfunctionajaxByAxios(query,fromauto,toen){if(!query?.trim()){thrownewError(请传入有效翻译文本);}try{// 异步请求await体现异步特性constresponseawaitaxios.post(http://localhost:3000/api/translate/baidu,{query,from,to},{timeout:8000});constdataresponse.data;if(data.code0){// 局部刷新页面AJAX核心特性document.getElementById(translate-result).innerTextdata.data.text;returndata.data;}else{thrownewError(data.msg||翻译失败);}}catch(error){console.error(axios AJAX失败,error.message);window.$message?.error(请求失败);throwerror;}}2fetch实现现代AJAX/** * fetch实现现代AJAX原生Promise化无需依赖 */exportasyncfunctionajaxByFetch(query,fromauto,toen){if(!query?.trim()){thrownewError(请传入有效翻译文本);}constcontrollernewAbortController();consttimeoutIdsetTimeout(()controller.abort(),8000);try{// 异步请求Promise化异步constresponseawaitfetch(http://localhost:3000/api/translate/baidu,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({query,from,to}),signal:controller.signal});clearTimeout(timeoutId);if(!response.ok){thrownewError(请求失败${response.status});}constdataawaitresponse.json();if(data.code0){// 局部刷新页面document.getElementById(translate-result).innerTextdata.data.text;returndata.data;}else{thrownewError(data.msg||翻译失败);}}catch(error){console.error(fetch AJAX失败,error.message);window.$message?.error(请求失败);throwerror;}}四、AJAX与传统同步请求的核心区别特性AJAX异步请求传统同步请求如form表单提交页面刷新方式局部刷新仅更新指定DOM整页刷新页面跳转/重载执行阻塞性异步非阻塞请求发送后可继续操作页面同步阻塞请求发送后页面无法操作等待响应用户体验流畅无页面闪烁、无需等待整页加载较差页面闪烁、等待时间长数据格式支持JSON/XML/Blob等灵活多为表单数据/HTML不灵活实现方式XMLHttpRequest/jQuery AJAX/axios/fetchform表单提交、window.location.href五、AJAX的适用场景与局限性1. 适用场景页面局部数据更新如翻译结果展示、评论列表加载、表单验证反馈异步加载数据如下拉加载更多、搜索框联想提示后台数据交互如用户登录、数据提交无需页面跳转。2. 局限性受同源策略限制默认无法跨域请求需通过CORS/代理解决无法实现“服务器主动推送”早期需通过轮询模拟现在可通过SSE/WebSocket补充不支持二进制数据的高效传输现代可通过Blob/ArrayBuffer优化。六、总结AJAX是思想不是具体工具它的核心是「异步数据交互页面局部刷新」XMLHttpRequest、jQuery AJAX、axios、fetch都是AJAX的实现方式发展历程原生XHR早期→ jQuery AJAX经典→ axios/fetch现代功能越来越简洁、强大核心特性异步性不阻塞页面、局部刷新提升体验是AJAX与传统请求的根本区别你的翻译场景无论是用axios还是fetch本质都是AJAX请求生产环境需通过后端中转实现安全访问。