AJAX请求简单封装–demo

<!DOCTYPE html>
<html>

<head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>随机点名系统</title>
    <Meta name="description" content="">
    <Meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    html,
    body {
        height: 98%;
        text-align: center;
    }

    #show {
        width: 600px;
        margin: auto;
        border: 1px solid #de9a9a;
        border-radius: 20px;
    }

    #show div {
        border: 1px solid #e5e5e5;
        width: 15%;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        margin-left: 20px;
        margin-top: 20px;
        display: inline-block;
    }

    #show .btn {
        display: block;
        width: 100%;
        margin: auto;
        margin-top: 20px;
        border-width: 0;
        text-align: center;
        background-color: #d46057;
        border-radius: 0 50px;
    }

    .btn button {
        width: 100px;
        height: 50px;
        margin-right: 50px;
        font-weight: bold;
        border-radius: 5px;
    }

    .selected {
        background-color: #bd5050;
        color: white;
        font-weight: bold;
    }
    </style>
</head>

<body>
    <div id="show"></div>
    <script type="text/javascript">
    /*
                功能：封装了ajax请求，要用原生ajax实现数据请求，直接调用此方法即可
                参数: ajaxObject 为一个对象，有以下属性

                属性method： 请求方式：get/post
                属性url: 请求地址
                属性par:请求的参数对象
                属性callback: 请求的回调函数
                属性failCallback :请求失败的回调 
                 */
    function ajaxFn(ajaxObject) {
        //作用为：检查参数对象属性值是否为空，如果为空，给其设置默认值
        var method = ajaxObject.method || "get";
        var url = ajaxObject.url || "http://www.blogzl.com/zl_other_module/ajaxTest/getTest.PHP";
        var parobj = ajaxObject.parobj || {};
        var successCallback = ajaxObject.successCallback;
        var failCallback = ajaxObject.failCallback; //表示失败后，要执行的回调函数

        var xhr = new XMLHttpRequest(); //创建xhr实例对象

        //如果是get请求，就将参数对象解析为字符串形式附加到url后面
        if (method == "get") {
            url += "?";
            for (let i in parobj) {
                url += i + "=" + parobj[i] + "&"; //将参数对象拼接为http://www.baidu.com?name='zs'&sex='nv'的形式
            }
            url = url.slice(0, -1); //将最后一个&符号去掉
            xhr.open(method, url); //创建ajax请求
            xhr.send(); //发送get请求
        }

        //如果是post请求就将参数对象解析为一个字符串，作为send方法的参数传递到后台去
        if (method == "post") {
            var parstr = "";
            for (let i in parobj) {
                parstr += i + "=" + parobj[i] + "&"; //将参数对象拼接为www.baidu,com?name='zs'&sex='nv'的形式
            }
            parstr = parstr.slice(0, -1); //将最后一个&符号去掉
            xhr.open(method, url); //创建ajax请求
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //post传参需要加上这句话
            xhr.send(parstr); //发送post请求
        }

        xhr.onreadystatechange = function() { //接收所请求的数据并进行处理
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //readyState为4，对应常量"DONE"，表示服务器数据已经完全接收，或者本次接收已经失败了
                    //status为200, 对应常量"OK"，访问正常
                    var v = xhr.responseText; //获取返回的数据
                    v = JSON.parse(v);
                    if (!successCallback) {
                        console.info(v);
                    } else
                        successCallback(v); //通过这个回调函数进行我们想要的操作
                } else {

                    if (!failCallback) {
                        console.info(v);
                    } else
                        failCallback(xhr.responseText); //通过这个回调函数进行我们想要的操作
                }
            }
        }
    }

    //调用实例
    ajaxFn({
        method: "post",
        url: "http://www.blogzl.com/zl_other_module/ajaxTest/postTest.PHP",
        parobj: { doWhat: "张三" },
        successCallback: function(obj) {
            console.info("返回值", obj);
        },
        failCallback: function(obj) {
            console.info("失败了：", obj);
        },
    })
    </script>
</body>

</html>
AJAX请求简单封装–demo

相关推荐
