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