ajax1.0,ie9及以下,ie10+支持ajax2.0
ajax2.0比ajax1.0:
1.多了FormData对象,xhr.send(formData) //不能用GET
2.文件上传,文件上传进度 //把<input type="file" />对象set入formData,xhr.upload.onprogress=ev=>{ev.loaded/evtotal}
3.CORS跨域双验证 // 请求头多了ORIGIN,响应头带上"Access-Control-Allow-Origin"
1.0写法,分四步:
1.创建xhr对象
let xhr = new XMLHttpRequest();
2. 设置超时时间(毫秒)
// 2s超时
xhr.timeout = 2000;
3.建立连接
// 方法 URL 是否异步
xhr.open('GET','http://www.qq.com',true);
4.设置http头
//可以设置某些http头信息
xhr.setRequestHeader('Expires', 'Mon, 20 Jul 2029 23:00:00 GMT')
//甚至是一些自定义的头部
xhr.setRequestHeader('amie', 'xxxxxxx')
//但是诸如User-Agent、Referer浏览器是禁止设置的
5.发送请求
//send可以send任意数据类型
xhr.send('内容');
6.接收响应
xhr.onreadystatechange= ()=>{
if(xhr.readyState == 4){
//请求完成了
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
//请求成功了,拿到返回的数据
var data = xhr.responseText;
}
}
}
7.超时和错误事件
xhr.ontimeout = xhr.onerror = err => {
this.$fui.popup({
message: '连通性测试失败',
type: 'error',
});
this.loading = false;
};