這篇文章主要為大家展示了“ajax請求方法有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ajax請求方法有哪些”這篇文章吧。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),射陽企業(yè)網(wǎng)站建設(shè),射陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,射陽網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,射陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。ajax請求方法如下
一、普通的ajax,async即同步異步處理,success之后,會有data返回值,status請求狀態(tài),xhr封裝的是請求頭,但要注意是的是,并不是所有的請求頭信息都能獲取到的,比如center-length就獲取不到
$.ajax({ type: "GET", async: true, //異步執(zhí)行 默認(rèn)是true異步 url: url, dataType: "json", // jsonp: "callback", success: function(data, status, xhr){ console.log(data);//返回值 console.log(status);//狀態(tài) console.log(xhr);//obj console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream console.log(xhr.getResponseHeader("Center-Length"));//null } });
二、有時候碰到的業(yè)務(wù)邏輯是這樣的,請求2依賴請求1的返回結(jié)果,請求3依賴請求2的返回結(jié)果,如果用回調(diào)的方式寫,會很冗長,解決的方法有兩個,首先來看ES5的解決辦法
(1)ES5的解決辦法,用ajax同步,默認(rèn)的ajax是異步的,即多個請求同時執(zhí)行,改成同步后,ajax一個一個的執(zhí)行,這樣ajax2就能取到ajax1的返回結(jié)果了
let res1 = "" let res2 = "" $.ajax({ type: 'get', async: false, //同步執(zhí)行 默認(rèn)是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, //同步執(zhí)行 默認(rèn)是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會按順序執(zhí)行,并且后面的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('上一步的結(jié)果:'+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('上一步的結(jié)果:'+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('上一步的結(jié)果:'+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跨域,動態(tài)添加script標(biāo)簽實現(xiàn)跨域,注意這里有一個callback需要跟server協(xié)商好
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是給后端接收用的,前端通過動態(tài)添加script標(biāo)簽,完成回調(diào) success: function(res){ if (res.code == 0) { console.log('更改狀態(tài) jsonp獲取數(shù)據(jù)成功!'); } else{ } } }); };
四、還會碰上這種業(yè)務(wù)邏輯,ajax1 ajax2 ajax3三個異步請求,不一定哪個先返回數(shù)據(jù),都請求成功后,執(zhí)行一個回調(diào) 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('創(chuàng)建1.2秒延時執(zhí)行promise'); setTimeout(function () { resolve("1.2秒延時執(zhí)行promise"); }, 1200); }); promiseList.push(p1) Promise.all(promiseList).then(function (result) { console.log('ajax全部執(zhí)行完畢:' + JSON.stringify(result)); // ["Hello", "World"] mySelf.assembleTableData(); }); },
以上是“ajax請求方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:ajax請求方法有哪些-創(chuàng)新互聯(lián)
URL鏈接:http://www.rwnh.cn/article38/cejhsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計、網(wǎng)站營銷、外貿(mào)網(wǎng)站建設(shè)、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容