ajax函数封装（三）

思路

1、将不统一的数据进行传参
2、根据需求考虑声明一个对象，设置相关的默认值
3、申明一个XMLHttpRequest,如果是IE 下 则声明一个ActiveXObject(‘Microsoft.XMLHTTP’)
4、处理请求方式字母大写标准化（可以不处理）
5、对get方式 以及 post方式 分别做判断处理
6、需要考虑到post方式中的数据提交方式，以及设置请求头的方式
7、需要考虑到get提交数据，对数据拼接的处理

代码如下：

 function ajax(init){
     let option = {  //设置一些参数默认值
         method: 'GET',
         data:{},
         async:true
     }
    let xhr = null;
    //声明一个Http请求，并且做IE的兼容，如果是用的if判断的话，可以判断window.XMLHttpRequest是否存在
    try{    
        xhr = new XMLHttpRequest();
    }catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    for(let a in init){
        option[a] = init[a];
    }
    //将请求数据方式的字母都转化为大写字母
    option.method = option.method.toUpperCase();

    //对get方式进行处理
    if(option.method == 'GET'){
        option.url+= '?'+ dealData(option.data);
        xhr.open('GET',option.url,true)
        xhr.send();
    }
    else if (option.method == 'Post'){
        xhr.open('Post',option.url,true);
        xhr.setRequestHeader('content-type',
        'application/x-www-form-urlencoded')
        xrh.send(dealData(option.data));
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                option.fn && option.fn(xhr.responseText);
            }else{
                alert('出错了，Err:'+ xhr.status);
            }
        }
    }

    function dealData(data){
        let arr = []
        for(let i in data){
            arr.push(encodeURI(i) + "="+encodeURI(data[i]));
        }
        return arr.join('&');
    }

}

温馨提示：如果对post 和 get 请求还不是很明白的话，可以查看博客：ajax 中 post 请求 和 get 请求的区别（二）