這次帶給大家在專案中如何使用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();
});
},
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是在專案中如何使用ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
