這篇文章主要給大家分享了在實戰中可能碰到的幾種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請求方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!