【JavaScript】封装自己的Ajax函数

最终要实现的封装效果

封装一个名为itheima的Ajax函数，调用它可以发起GET或POST请求：

// '&'拼接
function parseObjectToString(obj){
    let arr = []
    for(let key in obj){
        arr.push(`${key} = ${obj[key]}`)
    }
    return arr.join('&')
}

// 使用它可以发起任意类型的请求和接受响应数据
// option.method:请求方式
// option.url:请求地址
// option.params:url参数
// option.data:请求体参数
// success:请求成功之后的回调函数
function itheima({method,url,params,data,success}){
    // 1、创建实例对象
    let xhr = new XMLHttpRequest()
    // 2、设置请求报文
    // if(是get方式，且有params——将params进行转换，再进行拼接)
    if(method.toLoweCase() == 'get' && params){
        url = url + '?' + parseObjectToString(params)
    }
    // 2.1、设置报文行
    xhr.open(method,url)
    // 2.2、设置报文头
    if(method.toLoweCase == 'post' && data){
        if(typeof data == 'string'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // 2.3、设置请求报文体
            xhr.send(data)
        }else if (typeof data == 'object'){
            xhr.setRequestHeader('Content-Type','application/json')
            // 2.3、设置请求报文体-转字符串
            xhr.send(JSON.stringify(data))
        }else{
            // 2.3、设置请求报文体
            xhr.send(data)
        }
    }else {
        // 2.3、设置报文体
        xhr.send(data)
    
    // 3、接受响应数据
    xhr.addEventListener('load',function(){
        // xhr的功能是发起请求获取数据，但是它不能决定数据如何处理
        // 把响应的JSON数据转换为JS对象
        let result = JSON.parse(xhr.response)
        // 调用用户传入的回调函数，将数据以回调参数的形式返回
        success(result)
    })
    }
}