首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个兼容get请求和post请求的Ajax封装函数

一个兼容get请求和post请求的Ajax封装函数

作者头像
德顺
发布2019-11-12 23:09:09
1.6K0
发布2019-11-12 23:09:09
举报
文章被收录于专栏:前端资源前端资源

今天在看某风网老师录制的 Ajax 函数封装的视频,get 和 post 请求都考虑到了,我在这里也做一下笔记。

我把考虑到的都备注上了,以往可以给大家一点参考。代码如下:

JavaScript:

function ajax(method, url, data, callback) { // method:请求方式,url:请求的地址,data:数据,callback:回调
    if (method == "post") { //如果是post请求
        data = (function (obj) { // 自动执行的匿名函数 (function(){})();
            var str = "";
            for (item in obj) { //遍历数据
                str += item + "=" + obj[item] + "&";
            }
            return str.substring(0, str.length - 1); // 返回数据
        })(data)
    } else if (method == "get") { //如果是get请求
        data = true;
    };
    var xhr = null;
    // 创建异步请求
    if (window.XMLHttpRequest) { //如果是非IE
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE5.5/6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else { //错误提示
        alert("您的浏览器不支持HttpRequest");
    }
    if (xhr != null) {
        xhr.open(method, url, true); //请求方式,请求地址,是否异步:是
        xhr.onreadystatechange = function () { // 当 readyState 改变时,会触发 onreadystatechange 事件。
            if (xhr.readyState == 4) { // 如果请求完成
                if (xhr.status == 200) { // 如果服务器状态正常
                    callback(xhr.responseText,"success"); //返回数据和状态
                } else {
                    callback("系统错误!","error"); //错误提示
                }
            }
        }
        if (method == "post") { // 如果是post请求,需要设置请求头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        }
        xhr.send(data); // 发送数据
    }
}

保存为 ajax.js 文件,使用时直接调用即可。

如果需要调用:

<script>
    function send() {
        var obj = {name: "Marry", age: "26"};
        ajax("post", "post.php", obj , function (data, status) {
            if (status == "success") {
                console.log(data); //返回的数据
            } else {
                alert("错误的状态!")
            }
        })
    }
</script>

声明:本文由w3h5原创,转载请注明出处:《一个兼容get请求和post请求的Ajax封装函数》 https://cloud.tencent.com/developer/article/1537785

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档