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

今天在看某风网老师录制的 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>

推荐阅读：

HTML5新增的from表单input属性

Vue.js学习笔记——事件监听

CSS中的background属性与margin和padding内外边距的关系总结

在Webstorm中使用Autoprefixer实现CSS自动补全

给网站添加熊掌号粉丝关注按钮