Ajax封装2.0版

在之前了解并学习了Ajax的基础知识后,有些朋友可能觉得零碎的Ajax学起来有些繁琐,用起来也不太方便.那么我们为什么不能用函数将它封装起来,在我们需要它的时候便直接使用呢？那今天就让我们学习下Ajax的函数封装吧

Ajax封装

问题:发送一次请求代码过多,发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中,发送请求时调用函数即可

function ajax(options){
    // 存储默认值
    var defaults ={
         type:'get',
         url:'',
         data:{},
          header:{
        'Content-Type':'application/json'
    },
        success: function(){},
        error:function(){}

    }
    // 使用options对象中的属性覆盖defaults对象中的属性
    Object.assign(defaults,options);
    // 创建ajax对象
    var xhr = new XMLHttpRequest();
    // 拼接请求参数的变量
    var params = '';
    // 循环用户传递进来的对象格式参数
    for(var attr in defaults.data)
    {   // 将参数转换为字符串格式
        params += attr + '=' + defaults.data[attr] + '&';
    }
    params = params.substring(0,params.length-1);
    console.log(params);
    if(defaults.type == 'get')
    {
        defaults.url = defaults.url + '?'+params;
    }
    // 配置ajax对象
    xhr.open(defaults.type,defaults.url);
    // 发送请求 
    if(defaults.type == 'post')
    {   // 设置请求参数的类型
        var contentType = defaults.header['Content-Type'];
        xhr.setRequestHeader('Content-Type',contentType);
        if(contentType == 'application/json')
        {
            xhr.send(JSON.stringify(defaults.data));
        }
                else{
            xhr.send(params);
        }   
    }
    else{
        //发送请求
        xhr.send();
    }
    
    // 监听xhr对象下面的onload事件
    // 当xhr对象接受完相应数据后触发
    xhr.onload = function(){
        // xhr.getResponseHeader()
        // 获取响应头中的数据
        var cotn = xhr.getResponseHeader('Content-Type');
        var  responseText = xhr.responseText;
        if(cotn.includes('application/json'))
        {
            responseText = JSON.parse(responseText);
        }
        // 当http状态码为200时
        if(xhr.status == 200)
        {   // 请求成功 调佣处理成功情况的函数
            defaults.success(responseText,xhr);
        }
       else{
            // 请求失败 调佣处理失败情况的函数
        defaults.error(responseText,xhr);
       }
    }
    
·}
 /*
       请求参数要考虑的问题:
          1. 请求参数位置的问题
              将请求参数传递到ajax函数内部,在函数内部根据请求方式的不同将请求参数放置在不同的位置
               get放在请求地址的后面
               post放在send方法中
         2.请求参数格式的问题
            application/x-www-form-urlencodeded
            application/json
            1. 传递对象数据类型对于函数的调用者更加友好
            2. 在函数内部对象数据类型转换为字符串数据类型更加方便
       
       */

如果有朋友们觉得学习本篇文章没有太大的收获,想要了解更多的话,可以上b站获得更清晰明了的视频讲解哦ajax学习（众所周知,b站是一个学习网站）