原生ajax写法

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;
};
上一篇:原生js ajax与jquery ajax的区别


下一篇:STL容器分类