封装原生js的Ajax方法

封装好的函数

//创建一个ajax对象
function createXHR(){
    if(typeof window.XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else{
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}
//数据转换函数
function transform(data){
    //创建一个空的数组
    var attr = [];
    //把数据转码后push到数组中
    for(var i in data){
        attr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
    }
    //用join方法把数组拆开以&符号分割
    return attr.join('&');
}
function ajax(data){
    //创建一个ajax对象
    var xhr = createXHR();
    //给地址添加随机数作用是保证每次调用的都是不同的链接
    data.url = data.url+'?rand='+Math.random();
    //进行数据的转换‘ask码’
    data.data = transform(data.data);
    //如果为get请求那么附带的参数必须添加带链接的尾部
    if(data.mode == 'get'){
        //判断url中是否存在‘？’号如果存在则后结尾为&符号如果不存在则结尾添加符号为？
        data.url += data.url.indexOf('?') == -1 ? '?'+data.data : '&'+data.data;
    }
    //如果是一部加载的话那么必须验证readyState的状态4为完成
    if(data.ync == true){
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                callBank();
            }
        }
    }
    //传入地址，获取方法，同步异步
    xhr.open(data.mode,data.url,data.ync);
    //如果为post请求方式那么传入的参数必须添加到
    if(data.mode == 'post'){
        //因为post请求默认是要要form表单中才能使用的现在有个方法就是模拟表单来是用
        xhr.setRequestHeader('Content-Type','applation/x-www-form-urlencoded');
        //把参数传入到send里边
        xhr.send(data.data);
    }else{
        xhr.send(null);
    }
    //如果是同步方法的话那么就直接判断状态是否是200
    if(data.ync == false){
        callBank();
    }
    function callBank(){
        //如果相应状态是200的话执行
        if(xhr.status == 200){
            //利用回调传参的原理把获取到的内容传入在外面就可以直接使用
            data.success(xhr.responseText);
        }
    }
}

调用方法

ajax({
    url:'地址',
    mode:'get',     //调用方法get或者是post
    ync:true,       //同步为false异步为true
    data:{
        'name':'Bob-佳杰',
        'age':24
    },
    success:function(data){
        alert(data)
    }
});