1、ajax、axios、jsonp總結

標籤：div   必須   rip   ready   var   gif   imp   object   str   

 

  1 //一.原生js實現ajax請求  2 //   1.get請求  3   var xml=null;  4   if(XMLHttpRequest){  5       xml=new XMLHttpRequest;  6   }else{  7       xml=new ActiveXObject(‘Microsoft.XMLHTTP‘)  8   }  9   xml.open(‘GET‘,url,true);  10   xml.send(); 11   xml.onreadystatechange=function(){ 12       if(xml.readyState==4&&xml.status==200){ 13           //請求成功 14       }else{ 15           //請求失敗 16       } 17   } 18   //    2.post請求 19   var xml=null; 20   var data={a:1,b:2}; 21   if(XMLHttpRequest){ 22       xml=new XMLHttpRequest; 23   }else{ 24       xml=new ActiveXObject(‘Microsoft.XMLHTTP‘) 25   } 26   xml.open(‘POST‘,url,true); 27   xml.send(data); 28   xml.onreadystatechange=function(){ 29       if(xml.readyState==4&&xml.status==200){ 30           //請求成功 31       }else{ 32           //請求失敗 33       } 34   } 35   //二.jq實現ajax請求 36 //  1.get請求 37    $.ajax({ 38        type:"get", 39        url:"", 40        async:true, 41        success:function(){ 42            //請求成功 43        }, 44        error:function(){ 45            //請求失敗 46        } 47    }); 48    //2.post請求 49     $.ajax({ 50         type:"post", 51         url:"", 52         data:{a:1,b:2}, 53         async:true, 54         success:function(){ 55             //請求成功 56         }, 57         error:function(){ 58          //請求失敗     59         } 60     }); 61 //三.axios請求： 62  //首先安裝axios, 63 // 方法一：npm install axios 64 // 方法二： CDN引入  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 65 //1.get請求(無參數) 66   axios.get(‘http://www.xxx‘) 67   .then(function(response){ 68       //請求成功 69   }).catch(function(erroe){ 70       //請求失敗 71   }); 72 //2.get請求(有參數) 73     axios.get(‘http://www.xxx?a=1&b=2‘) 74       .then(function(response){ 75           //請求成功 76       }).catch(function(erroe){ 77           //請求失敗 78       }); 79  //3.post請求： 80   //必須引入qs對data進行stringify  安裝axios時已經安裝了qs,無需再安裝，引入即可用。 81   // import Qs  from ‘qs‘    82    let data=Qs.stringify({a:1,b:2}); 83    axios.post(‘http://www.xxx‘,data) 84    .then(function(response){ 85        //請求成功 86    }).catch(function(error){ 87        //請求失敗 88    }) 89    //4.多個請求同時發送 90    function axiosOne(){ 91     return axios.get(‘http://www.url.one‘)     92    }; 93    function axiosTwo(){ 94     return axios.get(‘http://www.url.two‘)     95    }; 96   axios.all([axiosOne(),axiosTwo()]) 97   .then(axios.spread(function(acct, perms){ 98       console.log(acct);//請求一的結果； 99       console.log(perms);//請求二的結果100   }))

 

1、ajax、axios、jsonp總結