一.原生js實現ajax請求: 步驟: get請求: 2.post請求: 二.jq實現ajax請求: get請求: post請求 三.axios請求: 首先安裝axios, 方法一:npm install axios 方法二: CDN引入 <script src="https://unpkg.com ...
一.原生js實現ajax請求:
步驟:
get請求:
// 1.創建一個XMLHttpRequest的對象. var xml=null; //初始值設為空 if(XMLHttpRequest){ xml=new XMLHttpRequest; //相容非IE6 }else{ xml=new ActiveXObject('Microsoft.XMLHTTP'); //相容IE6瀏覽器 } //2.通過open與伺服器建立連接 open(method,url,async) ; //method包含 GET、POST、PUT方式。 //第三個參數同步(false)或者非同步(true) xml.open('GET',url,true); //3.發送請求 send(string) //string(參數) 僅用於post請求,GET請求不需要傳參數,如果有參數直接拼接到url中。 xml.send(); //4.狀態和響應 xml.onreadystatechange=function(){ //當readyState==4並且status==200時請求成功,否則請求失敗 if(xml.readyState==4&&xml.status==200){ //請求成功 }else{ //請求失敗 } }
2.post請求:
//步驟同 get var xml=null; var data={a:1,b:2}; if(XMLHttpRequest){ xml=new XMLHttpRequest; }else{ xml=new ActiveXObject('Microsoft.XMLHTTP') } xml.open('POST',url,true); xml.send(data); //這裡的data是要傳遞的參數 xml.onreadystatechange=function(){ if(xml.readyState==4&&xml.status==200){ //請求成功 }else{ //請求失敗 } }
二.jq實現ajax請求:
get請求:
// 1.get請求 $.ajax({ type:"get", url:"", async:true, timeout:3000, //timeout:響應超時時間,非必須參數 beforeSend:function(){ //這裡是發送請求之前所要進行的操作 }, success:function(){ //請求成功 }, error:function(){ //請求失敗 } });
post請求
$.ajax({ type:"post", url:"", data:{a:1,b:2},//需要傳遞的參數 async:true, timeout:3000, //timeout:響應超時時間,非必須參數 beforeSend:function(){ //這裡是發送請求之前所要進行的操作 }, success:function(){ //請求成功 }, error:function(){ //請求失敗 } });
三.axios請求:
首先安裝axios,
方法一:npm install axios
方法二: CDN引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
get請求:
//1.get請求(無參數) axios.get('http://www.xxx') .then(function(response){ //請求成功 }).catch(function(erroe){ //請求失敗 });
//2.get請求(有參數) axios.get('http://www.xxx?a=1&b=2') .then(function(response){ //請求成功 }).catch(function(erroe){ //請求失敗 });
post請求:
//必須引入qs對data進行stringify 安裝axios時已經安裝了qs,無需再安裝,引入即可用。 // import Qs from 'qs' let data=Qs.stringify({a:1,b:2}); axios.post('http://www.xxx',data) .then(function(response){ //請求成功 }).catch(function(error){ //請求失敗 }) //4.多個請求同時發送 function axiosOne(){ return axios.get('http://www.url.one') }; function axiosTwo(){ return axios.get('http://www.url.two') }; axios.all([axiosOne(),axiosTwo()]) .then(axios.spread(function(acct, perms){ console.log(acct);//請求一的結果; console.log(perms);//請求二的結果 }))