这篇文章主要给大家分享了在实战中可能碰到的几种ajax请求方法，文中通过ajax示例代码介绍的非常详细，对大家具有一定的参考价值，对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的返回结果了
let res1 = ""
let res2 = ""
$.ajax({
type: 'get',
async: false, //同步执行 默认是true异步
url: pars.domain + "/api.php?action=xxx&date=2017-03-08&t=" + (new date).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=" + (new date).gettime(),
datatype: 'json',
success: function(res) {
if(res.code == 0){
res2 = res.data.bandwidth[0]
}else{
}
}
});
(2)es6的解决办法，用promise的then方法，效果和上面的一样，ajax会按顺序执行，并且后面的ajax会拿到前一个ajax的返回值，这样写起来，代码看起来会很流畅
let pro = new promise(function(resolve,reject){
let url = pars.domain + "/api.php?action=xxx=2017-03-08&t=" + (new date).gettime()
let ajax = $.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);
function requesta(res){
console.log('上一步的结果：'+res);
console.log('请求a成功');
let proa = new promise(function(resolve,reject){
let url = pars.domain + "/api.php?action=xxx&date=2017-03-08&t=" + (new date).gettime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resdata);
}
else{
}
}, "json");
});
return proa
}
function requestb(res){
console.log('上一步的结果：'+res);
console.log('请求b成功');
let prob = new promise(function(resolve,reject){
let url = pars.domain + "/api.php?action=xxx&date=2017-03-08&t=" + (new date).gettime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resdata);
}
else{
}
}, "json");
});
return prob
}
function requestc(res){
console.log('上一步的结果：'+res);
console.log('请求c成功');
let proc = new promise(function(resolve,reject){
let url = pars.domain + "/api.php?action=xxx&date=2017-03-08&t=" + (new date).gettime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resdata);
}
else{
}
}, "json");
});
return proc
}
function requesterror(){
console.log('请求失败');
}
三、jsonp跨域，动态添加script标签实现跨域，注意这里有一个callback需要跟server协商好
function switchengineroomajax(api,statuschanged){
var api = api;
var statuschanged = statuschanged;
var url = 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(){
var promise = new promise(function (resolve, reject) {
var url = "/api.php?action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('querylog完成！');
}
else{
}
}, "json");
});
return promise
},
ajax2: function(){
var promise = new promise(function (resolve, reject) {
var url = "/api.php?action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('querygroupnodelist完成！');
}
else{
}
}, "json");
});
return promise
},
ajax3: function(){
var promise = new promise(function (resolve, reject) {
var url = "/api.php?action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('querygroupnodemaplist完成！');
}
else{
}
}, "json");
});
return promise
},
initquery: function(){
var myself = this;
var promiselist = [];
var ajax1promise = myself.ajax1();
var ajax2promise = myself.ajax2();
var ajax3promise = myself.ajax3();
promiselist.push(ajax1promise,ajax2promise,ajax3promise);
var p1 = new promise(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();
});
},
以上就是本文的所有内容了，希望对大家学习提供到帮助！
相关推荐：
ajax跨页面提交表单
ajax结合豆瓣搜索结果进行分页完整代码
ajax实现带有验证码的局部刷新登录界面
以上就是在实战中可能碰到的几种ajax请求方法详解的详细内容。