详解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,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
js类的继承定义与用法分析
Jun 21 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
javscript 数组扁平化的实现
Feb 03 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操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python实现文本界面网络聊天室
2018/12/12 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
初婚初育证明
2014/01/14 职场文书
心理健康活动总结
2014/04/30 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
数据库之SQL技巧整理案例
2021/07/07 SQL Server
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang