原生JS封装AJAX方法

//TODO step1: 创建ajax对象

var xhr = new XMLHttpRequest();

//TODO step2: 设置请求参数

xhr.open('get','01.php',true);

//TODO step3: 设置回调

xhr.onreadystatechange = function () {

    //接收返回数据

    console.log(xhr.responseText);//responseText 用于接收后台响应的文本

}

//TODO step4: 发送请求

xhr.send();

function ajax(option){

    //用户配置option 默认配置init

    var init = {

        type:'get',

        async:true,

        url:'',

        success: function () { },

        error: function () { },

        data:{},

        beforeSend: function () {

            console.log('发送前...');

            return false;

        }

    };

    //TODO step1: 合并参数

    for(k in option){

        init[k] = option[k];

    }

    //TODO step2: 参数转换

    var params = '';

    for(k in init.data){

        params += '&'+k+'='+init.data[k];

    }

    var xhr = new XMLHttpRequest();

    // type url

    //TODO step3: 区分get和post,进行传参

    var url = init.url+'?__='+new Date().getTime();

    //TODO step4: 发送前

    var flag = init.beforeSend();

    if(!flag){

        return;

    }

    if(init.type.toLowerCase() == 'get'){

        url += params;

        xhr.open(init.type,url,init.async);

        xhr.send();

    }else{

        xhr.open(init.type,url,init.async);

      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

        xhr.send(params.substr(1));

    }

    xhr.onreadystatechange = function () {

        if(xhr.readyState == 4){

            if(xhr.status == 200){

                init.success(xhr.responseText);

            }else{

                //error

                init.error();

            }

        }

    }

}

ajax({

    url: 'test.json',

    data:{test:123,age:456},

    //type:'post',

    success: function (res) {

        console.log(res);

    }

});