AJAX的封装

qq_52068757

于 2022-07-17 15:02:55 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_52068757/article/details/125832012

笔记专栏收录该内容

15 篇文章

订阅专栏

这个博客介绍了如何使用Ajax函数进行GET和POST请求，包括在URL中添加随机数防止缓存，以及如何对请求数据进行序列化处理。在响应状态为200时调用success回调，否则触发error并显示错误状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function ajax(obj) {
    let xhr = new XMLHttpRequest()

    if (obj.type.toLowerCase() === 'get') {
        obj.url += '?rand' + Date.now() + '&'
        obj.url += serialize(obj.data)
    }
    xhr.open(obj.type, obj.url)

    if (obj.type.toLowerCase() === 'post') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(serialize(obj.data))
    } else {
        xhr.send()
    }
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                obj.success(xhr.responseText)
            } else {
                obj.error('出错了,错误状态是' + xhr.status)
            }
        }

    }

}

function serialize(param) {
    var arr = []
    for (var key in param){
        arr.push(key + '=' + encodeURIComponent(param[key]))
    }
    return arr.join('&')
}