详解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 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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的access操作类
2008/04/09 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Python 列表list使用介绍
2014/11/30 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
详解Python中where()函数的用法
2018/03/27 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python多进程重复加载的解决方式
2019/12/13 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
国旗下讲话演讲稿
2014/05/08 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
生日宴会祝酒词
2015/08/10 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
python 对图片进行简单的处理
2021/06/23 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS