在实战中可能碰到的几种ajax请求方法详解
前言
最近在做一个针对单个节点测速的功能页面，测速的逻辑是，测上传速度时，前端传5m数据给server，记录上传和返回数据的时间，测下载速度时，从server下载1m的数据，记录下载和下载成功的时间，上传和下载用的是ajax同步以避免客户端带宽阻塞的问题，并进行3次取平均值。在开发过程过，因为ajax同步异步的问题，走了不少弯路，特地也把之前遇到的业务逻辑整理汇总一下。
ajax请求方法如下
一、普通的ajax，async即同步异步处理，success之后，会有data返回值，status请求状态，xhr封装的是请求头，但要注意是的是，并不是所有的请求头信息都能获取到的，比如center-length就获取不到
$.ajax({
type:"GET",
async:true,//异步执行默认是true异步
url:url,
dataType:"json",
//jsonp:"callback",
success:function(data,status,xhr){
console.log(data);//返回值
console.log(status);//状态
console.log(xhr);//obj
console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream
console.log(xhr.getResponseHeader("Center-Length"));//null
}
});
二、有时候碰到的业务逻辑是这样的，请求2依赖请求1的返回结果，请求3依赖请求2的返回结果，如果用回调的方式写，会很冗长，解决的方法有两个，首先来看ES5的解决办法
(1)ES5的解决办法，用ajax同步，默认的ajax是异步的，即多个请求同时执行，改成同步后，ajax一个一个的执行，这样ajax2就能取到ajax1的返回结果了
letres1=""
letres2=""
$.ajax({
type:'get',
async:false,//同步执行默认是true异步
url:pars.domain+"/api.php?Action=xxx&date=2017-03-08&t="+(newDate).getTime(),
dataType:'json',
success:function(res){
if(res.code==0){
res1=res.data.bandwidth[0]
}else{
}
}
});
$.ajax({
type:'get',
async:false,//同步执行默认是true异步
url:pars.domain+"/api.php?Action=xxx&date=2017-03-08&dom1111"+res1+"&t="+(newDate).getTime(),
dataType:'json',
success:function(res){
if(res.code==0){
res2=res.data.bandwidth[0]
}else{
}
}
});
(2)ES6的解决办法，用promise的then方法，效果和上面的一样，ajax会按顺序执行，并且后面的ajax会拿到前一个ajax的返回值，这样写起来，代码看起来会很流畅
letpro=newPromise(function(resolve,reject){
leturl=pars.domain+"/api.php?Action=xxx=2017-03-08&t="+(newDate).getTime()
letajax=$.get(url,function(res){
if(res.code==0){
resolve(resData);
}
else{
}
},"json");
console.log('请求pro成功');
});
//用then处理操作成功，catch处理操作异常
pro.then(requestA)
.then(requestB)
.then(requestC)
.catch(requestError);
functionrequestA(res){
console.log('上一步的结果：'+res);
console.log('请求A成功');
letproA=newPromise(function(resolve,reject){
leturl=pars.domain+"/api.php?Action=xxx&date=2017-03-08&t="+(newDate).getTime()
letajax=$.get(url,function(res){
if(res.code==0){
resolve(resData);
}
else{
}
},"json");
});
returnproA
}
functionrequestB(res){
console.log('上一步的结果：'+res);
console.log('请求B成功');
letproB=newPromise(function(resolve,reject){
leturl=pars.domain+"/api.php?Action=xxx&date=2017-03-08&t="+(newDate).getTime()
letajax=$.get(url,function(res){
if(res.code==0){
resolve(resData);
}
else{
}
},"json");
});
returnproB
}
functionrequestC(res){
console.log('上一步的结果：'+res);
console.log('请求C成功');
letproC=newPromise(function(resolve,reject){
leturl=pars.domain+"/api.php?Action=xxx&date=2017-03-08&t="+(newDate).getTime()
letajax=$.get(url,function(res){
if(res.code==0){
resolve(resData);
}
else{
}
},"json");
});
returnproC
}
functionrequestError(){
console.log('请求失败');
}
三、jsonp跨域，动态添加script标签实现跨域，注意这里有一个callback需要跟server协商好
functionswitchEngineRoomAjax(api,statusChanged){
varapi=api;
varstatusChanged=statusChanged;
varurl=api+"?method=setStatus"+"&status="+statusChanged;
$.ajax({
type:"GET",
url:url,
dataType:"jsonp",
jsonp:"callback",//这里的callback是给后端接收用的，前端通过动态添加script标签，完成回调
success:function(res){
if(res.code==0){
console.log('更改状态jsonp获取数据成功！');
}
else{
}
}
});
};
四、还会碰上这种业务逻辑，ajax1ajax2ajax3三个异步请求，不一定哪个先返回数据，都请求成功后，执行一个回调 function，需要注意的是，单独的ajax也需要是new的promise
ajax1:function(){
varpromise=newPromise(function(resolve,reject){
varurl="/api.php?Action=xxx;
$.get(url,function(res){
if(res.code==0){
resolve('queryLog完成！');
}
else{
}
},"json");
});
returnpromise
},
ajax2:function(){
varpromise=newPromise(function(resolve,reject){
varurl="/api.php?Action=xxx;
$.get(url,function(res){
if(res.code==0){
resolve('queryGroupNodeList完成！');
}
else{
}
},"json");
});
returnpromise
},
ajax3:function(){
varpromise=newPromise(function(resolve,reject){
varurl="/api.php?Action=xxx;
$.get(url,function(res){
if(res.code==0){
resolve('queryGroupNodeMapList完成！');
}
else{
}
},"json");
});
returnpromise
},
initQuery:function(){
varmySelf=this;
varpromiseList=[];
varajax1Promise=mySelf.ajax1();
varajax2Promise=mySelf.ajax2();
varajax3Promise=mySelf.ajax3();
promiseList.push(ajax1Promise,ajax2Promise,ajax3Promise);
varp1=newPromise(function(resolve,reject){
console.log('创建1.2秒延时执行promise');
setTimeout(function(){
resolve("1.2秒延时执行promise");
},1200);
});
promiseList.push(p1)
Promise.all(promiseList).then(function(result){
console.log('ajax全部执行完毕：'+JSON.stringify(result));//["Hello","World"]
mySelf.assembleTableData();
});
},
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。