多次发送ajax 数据混乱,同时发送两个ajax数据有时候混乱?

代码如下:

/*ajax异步获取方法*/

function get(url,options,callback,elem){

var xhr=new XMLHttpRequest();

/*请求参数序列化*/

function serialize(data){

if(!data) return '';

var pairs=[];

for (var name in data){

if(!data.hasOwnProperty(name)) continue;

if(typeof data[name]==='function') continue;

var value=data[name].toString();

name=encodeURIComponent(name);

value=encodeURIComponent(value);

pairs.push(name+'='+value);

}

return pairs.join('&');

}

xhr.onreadystatechange=function(){

if (xhr.readyState==4){

if((xhr.status>=200 && xhr.status<300) || xhr.status==304){

callback(xhr.responseText,elem);

}else{

alert("request failed:"+xhr.status);

}

}

}

xhr.open("get",url+"?"+serialize(options),true);

xhr.send(null);

}

/*获取服务器数据后的回调函数,将数据放进模板,并插进文档中*/

function insert(data,element){

var data = JSON.parse(data);

console.log(data.list[0]);

var _templ =templ.innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

var out_templ=[];

for (var i=0; i

var _html_templ=_templ.replace(/{{smallPhotoUrl}}/g,data.list[i].bigPhotoUrl)

.replace(/{{name}}/g,data.list[i].name)

.replace(/{{provider}}/g,data.list[i].provider)

.replace(/{{learnerCount}}/g,data.list[i].learnerCount)

.replace(/{{categoryName}}/g,data.list[i].categoryName)

.replace(/{{description}}/g,data.list[i].description)

.replace(/{{price}}/g,data.list[i].price);

out_templ.push(_html_templ);

}

element.innerHTML=out_templ.join('');

}

function setCourse(num,callback,element){

get('http://study.163.com/webDev/couresByCategory.htm',{pageNo:1,psize:20,type:num},callback,element);

}

setCourse(10,insert,course_design);

setCourse(20,insert,course_language);

为什么有时候setCourse(10,insert,course_design)(请求1)获取的没问题,但是有时候setCourse(20,insert,course_language)(请求2)显示的是前一个的内容?

我在控制台里看了一下,数据的获取是没问题的,数据都被获取到了,问题应该是数据处理的环节出问题了。

发现有时候是请求1的数据先获取到,请求2的数据后获取到,这时请求1的数据处理后显示没问题,但是请求2的数据处理后发现是20个请求1的数据的显示;

有时候是请求2的数据先被获取到,请求2的数据后获取到,这时两个请求数据处理后的显示都是没有问题的。

然后我打断点看了一下,发现好像两个请求不会先一个处理完再处理一个,应该因为ajax是异步的,好像是两个请求都发送完毕后,再一起处理的,不知道对不对。然后有时候后面的数据处理就有时候会出问题了。其实这个真正的原因是什么?这里有什么坑?怎么解决这类问题啊?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值