这篇文章主要为大家展示了“ajax请求方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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请求方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
售后响应及时
7×24小时客服热线数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款