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

首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法。今天搞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请求,就会等服务器响应后,执行完代码,再继续迭代。但是好像不推荐这样做。

二、采用异步的方式,但要记住,每次迭代都要创建一个新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请求,似乎同步的方式性能更高。

这个问题解决了,也加深了对ajax、http的理解。
以上就介绍了JavaScript for循环中发送AJAX请求的问题,希望对Javascript教程有兴趣的朋友有所帮助。

时间: 2016-03-29

jsp+ajax发送GET请求的方法

本文实例讲述了ajax发送GET请求,然后通过jsp页面来接收处理的实现方法.分享给大家供大家参考.具体实现方法如下: Ajax发送GET请求 这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证. 下面先看JSP页面具体信息: 复制代码 代码如下: <form action="servlet/LoginServlet" method=&

AJAX中同时发送多个请求XMLHttpRequest对象处理方法

在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author    legend <legendsky@hotmai

防止重复发送 Ajax 请求

要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用: 不可避免地比普通流程要要多注册一个 complete 事件: 恢复状态的代码很容易和不相干的代码混合在一起: 推荐用主动查询状态的方式(A.B,jQuery 为例)或工具函数的方式(C.D)来去除重复操作,并提供一些例子作为参考: A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = fu

js与jQuery终止正在发送的ajax请求的方法

本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

防止重复发送Ajax请求的解决方案

在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

ie发送ajax请求返回上一次结果的解决方法

问题出现原因: 1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取 get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题 2. 火狐下面 每次激活事件 都会重新建立一次ajax请求 解决方法: 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 例如这样:URL

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

Javascript发送AJAX请求实例代码

一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

jquery跨域请求示例分享(jquery发送ajax请求)

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码 代码如下: // $.getJSON.php$

jquery+ajax每秒向后台发送请求数据然后返回页面的代码

复制代码 代码如下: <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function chlink() { var url = "../handler/userfirend.ashx"; $.get(url, function(data)

Extjs ajax同步请求时post方式参数发送方式

ajax同步请求一般下面这样: 复制代码 代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", 'http://localhost:8080/struts2study/TreeDDGet?node=-1',false); // 这里的conn对象其实就是 xmlHttpRequest 对象. conn.setRequestHeader("Content-Type",&q

浅谈Jquery中Ajax异步请求中的async参数的作用

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

解决js ajax同步请求造成浏览器假死的问题

一.问题的起因 今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").r

ajax 同步请求和异步请求的差异分析

ajax同步和异步的差异, 先看2段代码: 代码一: 复制代码 代码如下: Synchronize = function(url,param) { function createXhrObject() { var http; var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; try { http = new XMLHttpRequest;

herf=#导致Ajax请求时没有向后台发送数据

今天在做右键菜单,当点击重命名进行Ajax请求时,并没有向后台发送数据而是直接跳转到了首页.朕百思不得其解,后来在前台页面发现一个问题: 复制代码 代码如下: <span style="font-size:24px;"><li><a href='#' onclick="renameContactsFunction()">重命名</a></li></span> 原来就是这个herf='#'惹的祸.

Jquery ajax 同步阻塞引起的UI线程阻塞问题

最近做一个项目,遇到了一个问题同步ajax引起的ui线程阻塞问题,下面把我的问题解决过程分享给大家. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: function getData1(){ var result; $.ajax({ url : "p.php", async : false, success: function(d

jquery的ajax同步和异步的理解及示例

之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. 复制代码 代码如下: $.ajax({ type: "post",

jquery中的ajax同步和异步详解

之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. $.ajax({ type: "post", url: "

Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法

本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式)

postman中POST请求时参数包含参数list设置方式

如下所示: 图中params包含多个参数,具体如下: {"rzrq":"2019-01-21","rzlx":"1","nr":"","jsonStr":"[{'gzlx':'1','gznr':'11','gzcg':'11','czwt':'11','yjjy':'11','rzgl_id':'','px':1},{'gzlx':'1','gznr':'