怎么解决ajax异步问题,用javascript实现的ajax异步问题

r囧r小猫 2022-09-03 07:22 160阅读 0赞

各位好，我用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;

怎么解决ajax异步问题,用javascript实现的ajax异步问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关异步请求-AJAX

相关 ajax--异步请求

相关异步请求Ajax

相关关于ajax的异步同步问题

相关 ajax异步提交枷锁,ajax

相关怎么解决ajax异步问题,用javascript实现的ajax异步问题

相关 ajax异步

相关【ajax】ajax异步实现用户注册验证

相关 ajax异步刷新

相关 Ajax异步技术