使用原生js封装自己的ajax请求

不会建立本地服务器的小伙伴，可以看一下主页另一篇文章

使用node.js的express建立本地服务器

//测试数据
axo(
    {
        url: 'http://127.0.0.1:8080/api/login',
        method: 'post',
        data: {
            username: '赵璐',
            password: '123456'
        }
    }
)
//将用户传的参数拼接成字符串 username='赵璐'&password:'123456'
function resolveDate(data) {
    let arr = []
    for (let k in data) {
        let str = k + '=' + data[k]
        arr.push(str)
    }
    return arr.join('&')
}
//封装函数
function axo(option) {
    //先调用函数 将data里面的值拼接成字符串
    let qs = resolveDate(option.data)
    //1.创建请求对象
    let xhr = new XMLHttpRequest()
    //判断哪种请求方式 toUpperCase()统一将字符串变为大写
    if (option.method.toUpperCase() == 'GET') {
        // 2.建立链接
        xhr.open(option.method, option.url + '?' + qs)
        // 3.发送请求
        xhr.send()
    } else if (option.method.toUpperCase() == 'POST') {
        // 2.建立链接
        xhr.open(option.method, option.url)
        // 3.发送请求
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        xhr.send(qs)
    } else {
        return console.log('请求方式错误')
    }
    // 4.监听请求状态
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //将字符串转化为对象格式
            let result = JSON.parse(xhr.responseText)
            console.log(result);
        }
    }
}