一.原生js实现ajax请求：
步骤：
get请求：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 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请求：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//步骤同 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 1.get请求 $.ajax({ type:"get", url:"", async:true, timeout:3000, //timeout:响应超时时间，非必须参数 beforeSend:function(){ //这里是发送请求之前所要进行的操作 }, success:function(){ //请求成功 }, error:function(){ //请求失败 } }); |
post请求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$.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
2
3
4
5
6
7
|
//1.get请求(无参数) axios.get('http://www.xxx') .then(function(response){ //请求成功 }).catch(function(erroe){ //请求失败 }); |
|
1
2
3
4
5
6
7
|
//2.get请求(有参数) axios.get('http://www.xxx?a=1&b=2') .then(function(response){ //请求成功 }).catch(function(erroe){ //请求失败 }); |
post请求：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//必须引入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);//请求二的结果 })) |