详解JavaScript for循环中发送AJAX请求问题


Posted in Javascript onJune 23, 2020

首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法。今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了。所以该怎么办呢?设置延时(不太好)还是其他办法?
 办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法。

一、同步的ajax请求,而ajax请求默认是异步的,所以要设置为false。

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var path = document.getElementById("path").value;
 var xmlHttp = creatXMLHttpRequest();

 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action?" + resquestParmName + "="
 + invoiceId;
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4) {
 if (xmlHttp.status == 200) {

  var result = xmlHttp.responseText;
  if (result == "0") {
  document.getElementById("btn" + invoiceId).disabled = "disabled";
  }
 }
 }
 }
 xmlHttp.open("GET", url, false);
 xmlHttp.send(null);
 } 
}

这样,用同步的ajax请求,就会等服务器响应后,执行完代码,再继续迭代。但是好像不推荐这样做。

详解JavaScript for循环中发送AJAX请求问题

二、采用异步的方式,但要记住,每次迭代都要创建一个新XMLHttpRequest对象,不能重用。

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var xmlHttp;
 var path = document.getElementById("path").value;
 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 xmlHttp = creatXMLHttpRequest();
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action?" + resquestParmName + "="
 + invoiceId;
 fu(xmlHttp,url,invoiceId);
 } 
}
function fu(xmlHttp,url,invoiceId){
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4) {
 if (xmlHttp.status == 200) {
 
 var result = xmlHttp.responseText;
 if (result == "0") {
  
  document.getElementById("btn" + invoiceId).disabled = "disabled";
 }
 }
 }
 }
 //
 xmlHttp.open("GET", url, true);
 xmlHttp.send(null);
}

由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行。如果采用的是异步请求的方式,如果每次迭代的时候都去new一个XMLHttpRequest,这样每次请求都能完成,但是结果还是还是不准确,有些程序还未被执行。
明白了,原来是每次迭代去执行几行代码,应该把发送ajax异步请求的代码放在一个函数中,每次迭代就去调用这个函数,这样就行了。

性能上,对于这种迭代ajax请求,似乎同步的方式性能更高。

详解JavaScript for循环中发送AJAX请求问题

这个问题解决了,也加深了对ajax、http的理解。

以上就介绍了JavaScript for循环中发送AJAX请求的问题,希望对Javascript教程有兴趣的朋友有所帮助。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jquery实现图片预加载
Dec 25 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
You might like
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript 精粹笔记
2010/05/09 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
Vue中props的使用详解
2018/06/15 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python操作Excel之xlsx文件
2017/03/24 Python
python中sys.argv函数精简概括
2018/07/08 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python colormap库的安装和使用详情
2020/10/06 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
总经理任命书范本
2014/06/05 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
党员检讨书
2014/10/13 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
校运会通讯稿
2015/07/18 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
HAM-2000摩机图
2021/04/22 无线电
MySQL导致索引失效的几种情况
2022/06/25 MySQL