ajax封装

Ajax封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复

解决方案：将请求代码封装到函数中，发送请求时调用函数即可。

ajax({
	type: 'get',
	url: 'http://www.example.com',
	success: function(data){
		console.log(data);
	}
})

封装示例（重点！！！）：

function ajax(options){
    //存储的是默认值
    var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function(){},
        error: function(){}
    }
    //使用options对象中的属性覆盖defaults对象中的属性
    Object.assign(defaults, options);
    var xhr = new XMLHttpRequest();
    //拼接请求参数的变量
    var params = '';
    //循环用户传递进来的格式参数
    for(var attr in defaults.data){
        //将参数转换为字符串格式
        params += attr + '=' + defaults.data[attr] + '&';
    }
    //将参数最后面的&截取掉并重新赋给params变量
    params = params.substr(0, params.length - 1 );
    //判断请求方式
    if(defaults.type == 'get'){
        defaults.url += '?' + params;
    }
    xhr.open(defaults.type, defaults.url);
    if(defaults.type == 'post'){
        //用户希望的向服务器端传递的请求参数的类型
        var contentType = defaults.header['Content-Type'];
        //设置请求参数的格式类型
        xhr.setRequestHeader('Content-Type', contentType);
        //判断用户希望的请求参数的格式类型
        //如果类型为json
        if(contentType == 'application/json'){
            //向服务器端传递json格式类型的参数
            xhr.send(JSON.stringify(defaults.data));
        } else {
            //向服务器端传递普通类型的请求参数
            xhr.send(params);
        }
    } else {
        xhr.send();
    }

    xhr.onload = function(){
        //xhr.getResponseHeader()
        //获取响应头中的数据
        var contentType = xhr.getResponseHeader('Content-Type'); 
        //服务器端返回的数据
        var responseText = xhr.responseText;
        //如果响应头中包含application/json
        if(contentType.includes('application/json')){
            //将json字符串转换为json对象
            responseText = JSON.parse(responseText);
        }

        //当http状态码等于200的时候
        if(xhr.status == 200){
            //请求成功 调用处理成功情况的函数
            defaults.success(responseText, xhr);
        } else {
            //请求失败 调用处理失败情况的函数
            defaults.error(responseText, xhr)
        }

    }
}
ajax({
    //请求方式
    type: 'post',
    //请求地址
    url: 'http://localhost:3000/responseData',
    data: {
        name: 'zs',
        age: 18
    },
    // header: {
    //     'Content-Type': 'application/json'
    // },
    success: function(data, xhr){
        console.log('这里是success函数的');
        console.log(data);
    },
    // error: function(data, xhr){
    //     console.log('这里是error函数的');
    //     console.log(data);
    //     console.log(xhr);
    // }
})