5_Ajax 提交请求 默认是 异步还是同步,怎么改成同步?

本文详细介绍了Ajax请求中的async属性,通过设置该属性为false实现同步请求,此时浏览器会暂停其他操作等待请求完成;而设置为true则启用异步请求,允许浏览器在请求处理期间继续执行其他任务。同步请求可能导致页面假死,而异步请求则提高了用户体验。
控制 ajax 请求参数 async 属性的值可以切换成同步请求或异步请求。

同步请求:(false)同步请求即是当前发出请求后,浏览器什么都不能做,
			必须得等到请求完成返回数据之后,才会执行后续的代码,
			相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。
			也就是说,JS 代码加载到当前AJAX的时候会把页面里所有的代码停止加载,
			页面处于一个假死状态,
			当这个 AJAX 执行完毕后才会继续运行其他代码页面解除假死状态。

异步请求:(true) 异步请求就当发出请求的同时,浏览器可以继续做任何事, 
			Ajax 发送请求并不会影响页面的加载与用户的操作,
			相当于是在两条线上,各走各的,互不影响。

例子:
$.ajax({
url:"url",
type:"post", async:false,
success:function(){代码}});

控制 ajax 请求参数 async 属性的值可以切换成同步请求或异步请求。
同步请求:(false)同步请求即是当前发出请求后,浏览器什么都不能做,
必须得等到请求完成返回数据之后,才会执行后续的代码,
相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。
也就是说,JS 代码加载到当前AJAX 的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个 AJAX 执行完毕后才会继续运行其他代码页面解除假死状态。
异步请求:(true) 异步请求就当发出请求的同时,浏览器可以继续做任何事, Ajax 发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。
例子:
$.ajax({
url:“url”,
type:“post”, async:false,
success:function(){代码}});

虽然参考引用中未直接提及浏览器发送7次请求就卡死的问题,但可结合相关经验给出以下可能的解决办法: 1. **请求异步化**:若使用的是大量Ajax同步请求,可能会导致浏览器页面假死。可将同步请求改为异步请求,因为`async`默认是`true`(异步),`false`为同步,所以将其注释、删除或改成`true`,避免界面表面的卡死问题。示例代码如下: ```javascript $.ajax({ url: "your_url", type: "get", async: true, // 可省略,因为默认就是true success: function(response) { // 处理响应 } }); ``` 2. **心跳检测与定时检查**:使用JavaScript定时检查用户的操作,如果用户有一段时间没有进行任何操作,则定期刷新页面。也可以通过发送小的Ajax请求到服务器来维持会话活跃状态,避免因浏览器长时间不操作删除某些js文件导致页面异常。示例代码如下: ```javascript setInterval(() => { // 定时请求 防止页面卡死 someRequestFunction(); }, 60 * 60 * 1000); ``` 3. **设置请求超时时间**:为请求设置合理的超时时间,避免因某个请求长时间未响应而导致页面卡死。若请求超时,可给出相应提示。示例代码如下: ```javascript $.ajax({ url: "http://192.168.1.24:8085/your_api", type: "get", timeout: 5000, // 超时时间设置为5秒 success: function(e) { $.Deferred().resolve(e); // 处理响应 }, complete: function(XMLHttpRequest, status) { if (status == 'timeout') { spop({ template: '请求超时!', style: 'error', autoclose: 3000 }); } } }); ``` 4. **服务器端优化**:增加服务器端Session的超时时间,或者使用其他机制来维持用户会话状态,确保服务器能正常处理多次请求5. **使用本地存储**:使用`localStorage`或`sessionStorage`来存储用户的状态,并在页面加载时恢复状态,减少不必要的请求。示例代码如下: ```javascript // 存储状态 localStorage.setItem('userStatus', JSON.stringify(userStatus)); // 恢复状态 const storedStatus = localStorage.getItem('userStatus'); if (storedStatus) { const userStatus = JSON.parse(storedStatus); // 使用恢复的状态 } ``` 6. **使用WebSocket**:如果需要更实时的交互,可以使用WebSocket来保持连接,而不是依赖于轮询或者Ajax,以提高响应效率。示例代码如下: ```javascript const socket = new WebSocket('ws://your_websocket_url'); socket.onopen = function(event) { // 连接成功 }; socket.onmessage = function(event) { // 处理接收到的消息 }; socket.onclose = function(event) { // 连接关闭 }; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值