ajax同步异步总结

ajax同步异步
async:false同步,默认是true异步;
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

例如:
在写dataTable时候,如果此时dataTable里面的data需要用到ajax返回的data时候,就需要定义一个全局变量dataTableAjax;
接下来写ajax
$.ajax({
"type":"get",
"url":"static/js/app/realtimeData/search.json",
"data":{
    "zylb":$('#zylb').val(),
    "stationName":$('#stationName').val()
},
"dataType":"json",
"async":false,//------注意!!!此时若为true,则后面在用realTimeData.Table1的时候是null;若为false,则后面在用realTimeData.Table1的时候是success里                                                           // 面返回的data值;--ajax同步异步的区别
success:function(data){
    console.log(data);
    realTimeData.Table1=data;
    console.log("ajax");

}
})

dataTale({
"data":dataTableAjax.data,
"columns":dataTableAjax.columns
})

ajax同步异步的区别:
async:false同步,默认是true异步;
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
即异步时候,ajax运行时候下面的代码同时运行,此时用到了realTimeData.Table1的值,此时是null,会报错





### 如何优化前端 Ajax 请求的同步异步处理 #### 一、理解同步异步请求的本质差异 Ajax 的核心在于其能够实现网页局部刷新而无需重新加载整个页面的功能。默认情况下,Ajax 使用的是异步模式 (`async=true`),这意味着当发起请求后,浏览器不会阻塞后续代码的执行[^1]。然而,如果将 `async` 设置为 `false`,则会进入同步模式,此时 JavaScript 将暂停运行直至服务器返回结果[^2]。 尽管同步模式看似简单易用,但它存在显著缺点——它会使浏览器处于锁定状态,影响用户体验。因此,在实际开发中应尽量避免使用同步请求[^3]。 --- #### 二、最佳实践建议 ##### 1. **优先采用异步请求** - 异步请求能有效改善用户体验,因为它允许其他脚本继续执行而不必等待服务器响应[^4]。 - 对于大多数场景而言,推荐始终保留默认配置(即 `async=true`)。这样不仅可以防止页面卡顿,还能更好地管理复杂的交互逻辑。 ##### 2. **合理规划回调机制** - 当使用 jQuery 或原生 XMLHttpRequest 实现异步调用时,务必精心设计成功和失败两种情况下的回调函数[^1]。 ```javascript $.ajax({ url: 'example.php', type: 'POST', data: {key: value}, success: function(response){ console.log('Success:', response); }, error: function(xhr, status, error){ console.error('Error:', xhr.responseText); } }); ``` ##### 3. **利用 Promise 和 Async/Await 提升可读性** - 随着 ES6 的普及,Promise 已成为现代 JavaScript 中处理异步流程的标准工具之一;而更进一步地引入 async/await 则可以让代码看起来像同步那样简洁明了。 ```javascript const fetchData = async () => { try{ let result = await fetch('/data'); if(!result.ok){ throw new Error(result.statusText); } let jsonResult = await result.json(); console.log(jsonResult); }catch(e){ console.warn(`Failed to load resource due to ${e.message}`); } }; fetchData(); ``` ##### 4. **控制并发数以节省资源** - 如果有多个连续性的 Ajax 调用需求,则考虑合并这些请求或将它们分批发出,从而减少 HTTP 连接次数以及潜在的时间开销[^4]。 ##### 5. **缓存策略的应用** - 对于那些频繁访问却变化较少的数据源来说,启用本地存储或内存级缓存是非常必要的措施。例如通过 localStorage/sessionStorage 来保存临时数据副本,只有在必要时候才向后台索取最新版本。 ##### 6. **监控网络状况调整超时设定** - 不同环境下的网速可能存在巨大波动,所以适当延长 timeout 时间或者动态计算合理的阈值有助于应对突发延迟问题[^1]。 --- ### 总结 综上所述,针对前端 Ajax 请求中的同步异步处理优化方案主要包括但不限于以下几个方面:坚持选用异步形式作为首选项;构建清晰有效的事件监听器结构;采纳先进的语法特性增强表达力;限制同时在线的任务数量以防过载;实施恰当的资料暂存计划削减重复获取频率;最后还要依据实际情况灵活调节各项参数指标达到理想效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值