1、ajax、axios、jsonp总结

  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   }))