原生ajax解析&封装原生ajax函数

　　前沿：对于此篇随笔，完是简要写了几个重要的地方，具体实现细节完在提供的源码做了笔记

<一>ajax基本要点介绍--更好的介绍ajax

1. ajax对象中new XMLHttpRequest()属性和方法列表

2. 常用事件介绍

事件	触发时机
onreadystatechange	当readyState的值改变时触发，除了当它从非0变成0时
onloadstart	当调用send方法时会触发xhr.onloadstart,然后会触发xhr.upload.onloadstart，代表开始上传数据
onprogress	上传数据过程中会触发xhr.upload.onprogress，下载数据过程中会触发xhr.onprogress，onprogress每50ms会触发一次
onabort	调用abort方法后会触发
onerror	当发生网络异常的时候会触发，如果上传数据的过程还未结束，此时会先触发xhr.upload.onerror，然后再触发xhr.onerror；如果上传数据的过程已经结束，此时只会触发xhr.onerror
onload	上传数据成功，会触发xhr.upload.onload；下载数据成功会触发xhr.onload
ontimeout	当服务端响应的时间超过指定的timeout时间时，会触发此事件
onloadend	上传数据完成（成功或者失败）时会触发xhr.upload.onloadend；下载数据完成（成功或失败）会触发

3. 请求开始和结束零界点

【3.1】请求开始

　　xhr.onloadstart事件触发的时候，也就是你调用xhr.send()方法的时候。
因为xhr.open()只是创建了一个连接，但并没有真正开始数据的传输，而xhr.send()才是真正开始了数据的传输过程。只有调用了xhr.send()，才会触发xhr.onloadstart 。

【3.2】请求结束

　　xhr.loadend事件触发的时候

备注：

　　a.可以在 send()之后再设置此xhr.timeout，但计时起始点仍为调用xhr.send()方法的时刻。

　　b.当xhr为一个sync同步请求时，xhr.timeout必须置为0，否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。

4. 具体实现细节--封装ajax

function _ajax(obj){
    var xhr = null;
    // 创建-非IE6 ： IE6及其以下浏览器
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
        //针对某些特定版本的Mozillar浏览器的BUG进行修正
        if(xhr.overrideMimeType) {
            xhr.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
        var arr = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
        for(var i = 0; i < arr.length; i++){
            try {
                xhr = new ActiveXObject(arr[i]);
                break;
            }catch (e){
                console.log(e);
            }
        }
    }

    // 默认是异步请求
    var asyc = obj.asyc || true;
    var type = obj.type.toUpperCase() || "GET";
    var url = obj.url;
    var data = obj.data || {};

    console.log(objToStr(data));

    //选择发送请求方式
    if(type === "GET"){
        xhr.open(type,url+'?'+objToStr(data),asyc);
        xhr.send();
    }else if(type === "POST"){
        xhr.open(type,url,asyc);
        // 告诉后台传的是什么
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // xhr.setRequestHeader('Last-Modified', 'faqenfaAWASVaewfc');
        xhr.send(objToStr(data));
    }

    // 设置超时请求时间
    xhr.timeout = 3000;

    // 发送异步回调函数
    xhr.onreadystatechange = function () {
        console.log(xhr.readyState);
        // 测试追踪ajax处于那种状态,在正式代码中要隐藏此switch
        switch (xhr.readyState){
            case 0:
                console.log('xhr对象被成功构造，open()方法还未被调用');
                break;
            case 1:
                console.log('open()方法已被成功调用，send()方法还未被调用');
                break;
            case 2:
                console.log('send()方法已经被调用, 响应头和响应状态已经返回');
                break;
            case 3:
                console.log('响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据');
                break;
            case 4:
                console.log('整个数据传输过程结束，不管本次请求是成功还是失败');
                break;
        }

        if(xhr.readyState === 4 && xhr.status === 200){
            obj.success(xhr.responseText)
        }else {
            obj.error && obj.error();
        }
    };

    // 请求开始
    xhr.onloadstart = function (e) {
        console.log(e,'start');
    };

    //ajax请求结束
    xhr.loadend = function (e) {
        console.log(e,'end');
    };

    // 超时函数处理
    xhr.ontimeout = function (e) {
        obj.timeout && obj.timeout();
        console.log(e,'timeout');
    };

    // ajax请求错误处理
    xhr.onerror = function (e) {
        obj.errorAsyc && obj.errorAsyc();
        console.log(e,'error');
    };

    // 上传进度处理--upload用于在数据传输到服务器时收集一些传输信息，比如上传了多少字节，总共多少字节等，其里面还包含了一些事件回调
    xhr.upload.onprogress = function (e) {
        obj.progress && obj.progress();
        console.log(e,'progress');
    };

    console.log(xhr.getAllResponseHeaders(),'0000');
    // 把对象转换成字符串
    function objToStr(obj) {
        var arr = [];
        for(var key in obj){
            arr.push(key+'='+obj[key])
        }
        return arr.join('&');
    }
}

【封装ajax调用方式】

 　　window.onload = function () {
        btn.onclick= function () {
            _ajax({
                url:'http://localhost:8800',
                type:'post',
                asyc:true, //默认是true
                data:{
                    username:'zhange',
                    password:'123456'
                },
                success:function (data) {
                    console.log(data);
                },
                error:function () {

                }
            });
        }
    };