每日一练: xhr 的封装

对 xhr 的封装类似JQuery的get、post、ajax 方法。

// 将传递进来的参数转化为查询字符串的形式
function objToStr(obj){
    let arr = [];   
    for(let k in obj){        
        arr.push(k+"="+obj[k])
    }    
    return arr.join('&');
}
// 定义$对象
let $ ={    
    // 封装自己的$.ajax函数    
    ajax:function(options){        
        let objData =objToStr(options.data)   
        const xhr = new XMLHttpRequest();    
        if(options.method.toUpperCase()==="GET"){      
            xhr.open("GET", objData? options.url+ '?'+ objData :options.url)      
            xhr.send()   
        }else if(options.method.toUpperCase()==="POST"){      
            xhr.open("POST", options.url)      
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')   
            xhr.send(objData)     
        }     
        xhr.onreadystatechange = function(){       
            if(xhr.readyState ==4&&xhr.status == 200){        
                options.success?   options.success(JSON.parse(xhr.response)) :  null    
            }    
        }  
    },
    // 剩余参数用于获取多余的实参  
    get:(url,...arr)=>{    
        type = 'GET'    
        //把公共的部分提取出来     
        $.single(url,arr)   
    },    
    post:(url,...arr)=>{    
        type = 'POST'    
        $.single(url,arr)  
    },
    single:(url,arr)=>{
        // 对传递进来的实参个数、类型进行判断,再次调用ajax()
        if(arr.length ===0){
            $.ajax({method: type,url: url})
        }else if(arr.length ===1){
            if(typeof(arr[0]) === "object"){
                $.ajax({method: type,url: url,data:arr[0]})
            }else{
                $.ajax({method: type,url: url,success:function(res){console.log(res)}}) 
            }        
        }else if(arr.length ===2){
            $.ajax({method: type,url: url,data:arr[0],success:function(res){console.log(res)}})
        }
    }
}