详解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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
js+css3实现旋转效果
Jan 20 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
Javascript模块化机制实现原理详解
Apr 02 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强制下载类型的实现代码
2011/04/21 PHP
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Python命名空间详解
2014/08/18 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
培训讲师邀请函
2014/01/10 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
大型活动组织方案
2014/05/10 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
校长四风对照检查材料
2014/09/27 职场文书
离婚协议书标准格式
2014/10/04 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
学生上课说话检讨书
2014/10/25 职场文书
2014年司法所工作总结
2014/11/22 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
实习单位鉴定意见
2015/06/04 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA