這篇文章主要為大家展示了“ajax請(qǐng)求方法有哪些”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ajax請(qǐng)求方法有哪些”這篇文章吧。

ajax請(qǐng)求方法如下
一、普通的ajax,async即同步異步處理,success之后,會(huì)有data返回值,status請(qǐng)求狀態(tài),xhr封裝的是請(qǐng)求頭,但要注意是的是,并不是所有的請(qǐng)求頭信息都能獲取到的,比如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
}
});二、有時(shí)候碰到的業(yè)務(wù)邏輯是這樣的,請(qǐng)求2依賴請(qǐng)求1的返回結(jié)果,請(qǐng)求3依賴請(qǐng)求2的返回結(jié)果,如果用回調(diào)的方式寫,會(huì)很冗長(zhǎng),解決的方法有兩個(gè),首先來(lái)看ES5的解決辦法
(1)ES5的解決辦法,用ajax同步,默認(rèn)的ajax是異步的,即多個(gè)請(qǐng)求同時(shí)執(zhí)行,改成同步后,ajax一個(gè)一個(gè)的執(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會(huì)按順序執(zhí)行,并且后面的ajax會(huì)拿到前一個(gè)ajax的返回值,這樣寫起來(lái),代碼看起來(lái)會(huì)很流暢
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('請(qǐng)求pro成功');
});
//用then處理操作成功,catch處理操作異常
pro.then(requestA)
.then(requestB)
.then(requestC)
.catch(requestError);
function requestA(res){
console.log('上一步的結(jié)果:'+res);
console.log('請(qǐng)求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('請(qǐng)求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('請(qǐng)求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('請(qǐng)求失敗');
}三、jsonp跨域,動(dòng)態(tài)添加script標(biāo)簽實(shí)現(xiàn)跨域,注意這里有一個(gè)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是給后端接收用的,前端通過(guò)動(dòng)態(tài)添加script標(biāo)簽,完成回調(diào)
success: function(res){
if (res.code == 0) {
console.log('更改狀態(tài) jsonp獲取數(shù)據(jù)成功!');
}
else{
}
}
});
};四、還會(huì)碰上這種業(yè)務(wù)邏輯,ajax1 ajax2 ajax3三個(gè)異步請(qǐng)求,不一定哪個(gè)先返回?cái)?shù)據(jù),都請(qǐng)求成功后,執(zhí)行一個(gè)回調(diào) function,需要注意的是,單獨(dú)的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秒延時(shí)執(zhí)行promise');
setTimeout(function () {
resolve("1.2秒延時(shí)執(zhí)行promise");
}, 1200);
});
promiseList.push(p1)
Promise.all(promiseList).then(function (result) {
console.log('ajax全部執(zhí)行完畢:' + JSON.stringify(result)); // ["Hello", "World"]
mySelf.assembleTableData();
});
},以上是“ajax請(qǐng)求方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:ajax請(qǐng)求方法有哪些-創(chuàng)新互聯(lián)
URL鏈接:http://chinadenli.net/article38/cejhsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
移動(dòng)網(wǎng)站建設(shè)知識(shí)