js原生（ajx-post，get jsonp）三合一封装

最新推荐文章于 2022-06-27 17:30:22 发布

划水的乌贼

最新推荐文章于 2022-06-27 17:30:22 发布

阅读量244

点赞数 1

分类专栏： js 文章标签： js ajax javascript

本文链接：https://blog.csdn.net/dergfg/article/details/112604348

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保持对代码的热爱并保存怀疑态度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="tet1">
    <input type="text" name="" id="tet2">
    <input type="button" name="" id="btn">
</body>
<script>
    var tet1=document.getElementById("tet1");
    var tet2=document.getElementById("tet2");
    var btn=document.getElementById("btn");

    btn.onclick=function(){  //为了测试封装的能不能用
        san({
            url:"ceshi.php",
            success:function(res){
                console.log(res);
            },
            data:{
                use:tet1.value,
                pos:tet2.value
            }
        })
    }





    function san(ops){
        //es6解构赋值，接收的是一个对象，es6新语法见首页
        var{url,
            data={},  //传向后端的数据
            success=function(){}, //成功执行
            error,   //异常
            type="get", //默认请求方式
            sign=true,  //是否异步
            timeout=1000  //超时，默认值
        }=ops


        var str=""; //定义一个空字符
        for(var i in data){
            str+=`${i}=${data[i]}&`; //因为get请求的是拼接在浏览器地址，故这里做拼接  格式：字段名=字段值&
        }
        url=url+"?"+str+"dihjf="+Date.now();//拼接到浏览器数据，get和jsonp都是用url向后端传数据的，"dihjf="+Date.now()解决缓存问题

        setTimeout(() => {
            error && error(timeout);  //调用延时器是为了报请求超时后清空
            error = null; //清空原来的状态
            success = null;//清空原来的状态
        }, timeout);


        if(type!=="jsonp"){   //因为json和get，post的方法不一样，加判断
            var xhr=new XMLHttpRequest(); //开启ajax
            xhr.open(type,url);    
            if(type==="get"){ //因为get和post的参数放的位置不一样，所以加判断
                xhr.send();   
            }else{
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(str);
            }
            xhr.onload=function(){
                if(xhr.status===200){   //200成功执行
                    success && success(xhr.responseText);//接收数据
                    error = null;  //清空error和succe
                    success = null;
                    


                }else{
                    error && error(xhr.status); //报异常的代码
                    error = null;
                    success = null;

                }
            }
            return;
        }

        var script=document.createElement("script");  //jsonp的格式,创建script
        script.src=url;   //用url传递参数
        document.body.appendChild(script);    //放到网页中

        window[data[data.cn]]=function(){   //全局的函数，为了上面能调用的到，因为是两个单独的函数
            success && success(res);   //成功后输出
            error = null;   
            success = null;
        }

    }
</script>
</html>

划水的乌贼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js原生（ajx-post，get jsonp）三合一封装

保持对代码的热爱并保存怀疑态度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
复制链接

扫一扫