ajax封装get、post请求

最新推荐文章于 2023-12-05 18:03:44 发布

闽南,

最新推荐文章于 2023-12-05 18:03:44 发布

阅读量2.9k

点赞数

分类专栏： js面试题文章标签： ajax 前端

本文链接：https://blog.csdn.net/A_lose/article/details/133019107

版权

js面试题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//JS如何封装一个ajax请求
//请求方式：请求地址，请求参数，请求参数的类型
//请求返回的结果
function ajax(options) {
    //创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest();
    //初始化参数内容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data
    //发送请求
    if (options.type === 'GET') {
        xhr.open('GET', options.url + "?" + getParams(params), true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)
    }
    //接收请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 & xhr.status < 300) {
                //responseText字符串的响应数据
                //responseTypeXML形式的响应数据
                options.success(xhr.responseText, xhr.responseXML)
            } else {
                options.fail('参数错误' + xhr.status)
            }
        }
    }
}

ajax({
    type: 'post',
    dataType: 'json',
    data: {
        limit: 10
    },
    url: 'http://localhost:3000/personalized',
    success: function (text, xml) {//成功的回调
        console.log(JSON.parse(text));
    },
    fail: function (status) {//失败的回调
        console.log(status);
    }
})
//对参数做处理
function getParams(data) {
    let arr = [];
    // url = 'limit=10&age=19'
    for (let key in data) {
        arr.push(`${key}=${data[key]}`)
    }
    console.log(arr.join('&'));
    return arr.join('&')
}
// 转换为数组： ['limit=10', 'age=20', 'sex=12']
// 数组使用join拼接& limit=10&age=20&sex=12
getParams({ limit: 10, age: 20, sex: 12 })

主要需要掌握ajax的原理，封装之前考虑到我们函数需要接收的参数。

getParams是为了将我们get请求中获取到的date数据可以解析到我们的请求地址上，封装为一个函数。