Javascript封装Ajax方法

封装ajax方法大致流程如下：

1. 实例化XMLHttpRequest
2. 设置超时时间、响应类型、请求头等
   xhr.timeout = 3000; (同步请求时不能设置，或者设置为0)
   xhr.responseType = ‘text’; (同步请求时不能设置）
   xhr.setRequestHeader(请求头名，值）
3. 注册事件，常用的事件有：
   onreadystatechange：监测readyState变化；
   1: open()方法已被成功调用，send()方法还未被调用
   2: send() 方法已经被调用，并且头部和状态已经可获得
   3: 下载中； 可以拿到部分响应数据
   4: 下载完成；可以拿到响应数据
   onloadstart：只有调用了xhr.send()，才会触发xhr.onloadstart,表示请求开始; 开始发送数据
   onload：请求完成时触发
   onloadend：请求结束
   ontimeout：请求超时
   onerror：请求出现问题触发
4. 调用open方法，建立连接 open(method, url, async = true)
5. 调用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);
    }

}

关于XMLHttpRequest特别好的一篇文章