ajax、axios总结
一.原生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); //请求二的结果 })) |