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);//objconsole.log(xhr.getResponseHeader("Content-Type"));//application/octet-streamconsole.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{}}});};

四、还会碰上这种业务逻辑，ajax1 ajax2 ajax3三个异步请求，不一定哪个先返回数据，都请求成功后，执行一个回调 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();});},