封装ajax方法大致流程如下:
- 实例化XMLHttpRequest
- 设置超时时间、响应类型、请求头等
xhr.timeout = 3000; (同步请求时不能设置,或者设置为0)
xhr.responseType = ‘text’; (同步请求时不能设置)
xhr.setRequestHeader(请求头名,值) - 注册事件,常用的事件有:
onreadystatechange:监测readyState变化;
1: open()方法已被成功调用,send()方法还未被调用
2: send() 方法已经被调用,并且头部和状态已经可获得
3: 下载中; 可以拿到部分响应数据
4: 下载完成;可以拿到响应数据
onloadstart:只有调用了xhr.send(),才会触发xhr.onloadstart,表示请求开始; 开始发送数据
onload:请求完成时触发
onloadend:请求结束
ontimeout:请求超时
onerror:请求出现问题触发 - 调用open方法,建立连接 open(method, url, async = true)
- 调用send方法,发送数据
/*封装ajax方法
type:get/post
callback:回调函数
async:同步还是异步
*/
function ajax(type, url, data, callback, async) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHttp');
}
//放在发送请求前绑定,以防止请求响应太快而无法进入
request.onreadystatechange = function () {
/* 0: 代理被创建,但尚未调用 open() 方法
1:open() 方法已经被调用
2:send() 方法已经被调用,并且头部和状态已经可获得
3:交互中,浏览器正在解析响应内容
4:完成,响应内容解析完成
*/
if (request.readyState == 4) {
if (request.status >= 200 && request.status < 300 || request.status == 304) {
typeof callback == 'function' ? callback(request.responseText) : '';
} else {
console.log('error' + request.response.status);
}
}
}
// 也可以使用onload来获取响应; 此事件只会在请求结束后触发,此时readyState值为4;(先触发readyState事件,后触发onload)
request.onload = function() {
if (request.status >= 200 && request.status < 300 || request.status == 304) {
typeof callback == 'function' ? callback(request.responseText) : '';
} else {
console.log('error' + request.response.status);
}
var type = type.toUpperCase();
if (type == 'GET') {
request.open('GET', url + '?' + data, async);
request.send();
} else if (type == 'POST') {
request.open('POST', url, async);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(data);
}
}