原生js ajax简单封装和使用

最新推荐文章于 2022-11-26 23:30:00 发布

智勇双全我心飞翔

最新推荐文章于 2022-11-26 23:30:00 发布

阅读量544

点赞数

分类专栏： android基本工具使用文章标签： ajax简单封装网络请求

本文链接：https://blog.csdn.net/qq_35115643/article/details/78688375

版权

android基本工具使用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

相信大家都看了下ajax基本使用，感觉每次调用是不是很麻烦啊，这样的话就要简单的封装下了，废话不多说，直接走起吧

一：进行简单的基本封装（根据自己的需求可以再次封装喔）

function ajax(obj) {
//做网络请求的时候,参数以"对象"的形式传递进来
//规定: obj 里面包含属性: 
//1.url 
//2.type -- get 还是 post
//3.data -- 前端给后端传递的参数(前端传递的时候,以"对象"的形式)
//4.回调函数 -- success
//5.回调函数 -- error
    var ajaxObj = null;
    if (window.XMLHttpRequest) {
        ajaxObj = new XMLHttpRequest();
    } else {
        ajaxObj = new ActiveObject("Microsoft.XMLHTTP");
    }
//检测状态的变化
    ajaxObj.onreadystatechange = function () {
        if (ajaxObj.readyState == 4) {
            if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
                if (obj.success) {
                    obj.success(ajaxObj.responseText);
                } else {
                    alert("您忘记了 success 函数");
                }
            } else {
                if (obj.error) {
                    obj.error(ajaxObj.status);
                } else {
                    alert("您忘记了 error 函数");
                }
            }
        }
    }
// type 转化为小写
    var type = obj.type || "get";
    type = type.toLowerCase();
//判断是否传递了参数
    var params = "";
    //进行遍历赋值
    if (obj.data) {
        for (var key in obj.data) {
            params += (key + "=" + obj.data[key] + "&");
        }
        params = params.slice(0, params.length - 1);
    }
    //参数传递，判断是否get请求，进行怎么参数传递
    if (type == "get") {
        ajaxObj.open(type, obj.url + "?" + params, true);
        ajaxObj.send(null);
    } else {
        ajaxObj.open(type, obj.url, true);
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajaxObj.send(params);
    }
}

二：进行基本的调用数据使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js获取数据</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <!--进行引用文件-->
    <script src="js/ajax.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                console.log("点击事件")
                var oname = {}
                /*下面可以传递参数*/
                ajax({
                    type: "get",
                    url: "连接地址",
                    data: oname,
                    async: true,
                    success: function (response) {
                        console.log(response)
                        console.log(JSON.parse(response))
                    },
                    error: function () {
                        console.log("服务器内部错误")
                    }
                });
            }
        }
    </script>
</head>
<body>
<div>
    <button id="btn">get请求</button>
</div>
</body>
</html>

大家共同学习啊，好好学习，天天向上