用javascript实现的ajax异步问题

Question

各位好，我用javascript写的ajax异步对象，发送异步请求，在同一个页面，连续发送连个异步请求，但是因为在第一异步请求，没处理完，第二异步请求已经发送，我查过资料，说js里面的都是单线程的发送异步请求，这样我第一个异步请求就呗Abort了挂起了，请问我该如何更好的处理这个问题，我现在的处理方式是当我发送第一异步请求了，第二个异步请求，我放在一个定时器里面，让它在500毫秒后才执行，这样就不会出现在同时发送两个异步请求的时候第一个异步请求被挂起，但总觉得这并不妥，请问有什么更好的解决方式吗？我的异步请求是在循环里面发送的，我现在只能是用定时器的方式解决。   下面是我的代码： //这里是创建异步对象跟封装了发送异步请求的方法 //===创建Ajax异步对象===function createXMLRequest() { var xmlHttp = false; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } else { alert("对不起！本页面暂时不支持您的浏览器！请更换主流浏览器！"); } return xmlHttp;}var ajaxObject = { xmlRequest: createXMLRequest(), fnCallback: function (callback) { if (this.xmlRequest.readyState == 4) { if (this.xmlRequest.status == 200) { callback ? callback(this.xmlRequest.responseText) : void (0); } } }, sendRequest: function (url, requestType, requestParams, callback) { var base = this; if (this.xmlRequest === null || this.xmlRequest === undefined) { return false; } this.xmlRequest.onreadystatechange = function () {//设置异步请求的监听函数 base.fnCallback(callback); }; this.xmlRequest.open(requestType, url, true); if (requestType === "Get") { //get方式发送请求，设置不保留缓存 this.xmlRequest.setRequestHeader("If-Modified-Since", "0"); } else if (requestType === "Post") { this.xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //发送ajax异步请求 this.xmlRequest.send(requestParams); }};     //=====注册信息的校验======== function validateResisterInfo(type) { var max; //获得所有name属性为inputs的input标签 var inputs = getControlByName("inputs"); for (var i = 0, max = inputs.length; i < max; i++) { switch (i) { case 0: showMsg.createMsgDiv("showDiv0"); if (type == 1) {//当第一次进入注册页面的时候 showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv0"); isTrue = false; } else {//提交注册信息时，对注册信息进行数据校验 var input0 = (function () { return inputs[i].value; })(); //验证邮箱 var regEx = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g; if (input0.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else if (!regEx.test(input0)) { showMsg.addMsg("错误的邮箱格式！", "validation-error"); isTrue = false; } else { var url = "Ajax/ValidateResister.ashx?email=" + input0 + "&type=1"; //验证邮箱是否已经注册过 ajaxObject.sendRequest(url, "Get", null, function (data) {//这里发送异步请求 showMsg.createMsgDiv("showDiv0"); if (data == "1") { showMsg.addMsg("该邮箱已被其他用户注册", "validation-error"); isTrue = false; } else { showMsg.addMsg("输入成功！", "validation-valid"); isTrue = true; } }); } } break; case 1: showMsg.createMsgDiv("showDiv1"); if (type == 1) {//当第一次进入注册页面的时候 showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv1"); isTrue = false; } else {//提交注册信息时，对注册信息进行数据校验 var input1 = (function () { return inputs[i].value; })(); if (input1.length < 4 && input1.length > 0) { showMsg.addMsg("不能小于4个字符！", "validation-error"); isTrue = false; } else if (input1.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else { setTimeout(function () { var url = "Ajax/ValidateResister.ashx?userName=" + input1 + "&type=2"; //验证用户是否已经注册过 ajaxObject.sendRequest(url, "Get", null, function (data) {//这里发送异步请求 showMsg.createMsgDiv("showDiv1"); if (data == "3") { showMsg.addMsg("该用户已存在", "validation-error"); isTrue = false; } else { showMsg.addMsg("输入符合规则！", "validation-valid"); isTrue = true; } }); }, 200); } } break; case 2: if (type == 1) {//当第一次进入注册页面的时候 showMsg.createMsgDiv("showDiv2"); showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv2"); isTrue = false; } else {//提交注册信息时，对注册信息进行数据校验 showMsg.createMsgDiv("showDiv2"); if (inputs[i].value.length < 4 && inputs[i].value.length > 0) { showMsg.addMsg("不能小于4个字符！", "validation-error"); isTrue = false; } else if (inputs[i].value.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else { showMsg.addMsg("输入符合规则！", "validation-valid"); isTrue = true; } } break; case 3: if (type == 1) {//当第一次进入注册页面的时候 showMsg.createMsgDiv("showDiv3"); showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv3"); isTrue = false; } else {//提交注册信息时，对注册信息进行数据校验 pwd = inputs[i].value; showMsg.createMsgDiv("showDiv3"); //验证密码的格式 var reExg = /^[a-zA-Z]\w{5,17}$/g; if (inputs[i].value.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else if (!reExg.test(inputs[i].value)) { showMsg.addMsg("密码长度必须在6~18之间！", "validation-error"); isTrue = false; } else { showMsg.addMsg("输入成功！", "validation-valid"); isTrue = true; } } break; case 4: showMsg.createMsgDiv("showDiv4"); if (type == 1) {//当第一次进入注册页面的时候 showMsg.createMsgDiv("showDiv4"); showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv4"); isTrue = false; } else { if (inputs[i].value.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else if (inputs[i].value.length != pwd) { showMsg.addMsg("密码输入不一致！", "validation-error"); isTrue = false; } else { showMsg.addMsg("输入成功！", "validation-valid"); isTrue = true; } } break; case 5: if (type == 1) {//当第一次进入注册页面的时候 showMsg.createMsgDiv("showDiv5"); showMsg.addMsg("必填项！", "validation-ready"); showMsg.appendElement("showDiv5"); isTrue = false; } else { showMsg.createMsgDiv("showDiv5"); if (inputs[i].value.length <= 0) { showMsg.addMsg("不能为空！", "validation-error"); isTrue = false; } else { var input2 = (function () { return inputs[i].value; })(); setTimeout(function () { var url = "Ajax/ValidateResister.ashx?validateCode=" + input2 + "&type=3"; //验证验证码是否输入正确 ajaxObject.sendRequest(url, "Get", null, function (data) { showMsg.createMsgDiv("showDiv5"); if (data == "5") { showMsg.addMsg("输入成功！", "validation-valid"); isTrue = true; } else { showMsg.addMsg("验证码输入错误！", "validation-error"); isTrue = false; } }); }, 1000); } } break; default: break; } } }

Answer 1

ajax请求是可以异步的。推荐使用jquery等框架。

如果使用jquery.ajax可以通过参数async设置请求同步或者异步。

关于循环执行的问题，ajax请求有成功或者失败的标识，是否可以与这个结合起来。

Answer 2

你可以在第一次，返回數據后，才能再讓發送。設置一個變量。如果變量是false，就可以發送，發送以後成true，返回結果后，設置成false。

Answer 3

你到底想实现什么效果呢，假如两个没有关系的ajax请求，根本没必要进行什么处理，让他们各自执行就是了，至于你说的只能有一个ajax可以执行（就是你说的发出一个ajax请求，上一个请求会阻塞），在异步时候不存在这种情况。

Answer 4

就是防止连打吧，把onclick事件去掉，即：attr('onclick','');