ajax与jsonp中的几个封装函数

首先是ajax里的get

在页面上添加几个标签用作测试

<body>

    <input type="text" id="user">

    <input type="text" id="pass">

    <input type="button" id="btn">

</body>

js部分：

    var ouser = document.getElementById("user")

    var opass = document.getElementById("pass")

    var obtn = document.getElementById("btn")

    obtn.onclick = function(){

        var url = "http://localhost/ajax/data/data.php";

        ajaxGet(url,function(res){

            console.log(res)

        },{

            user:ouser.value,

            pass:opass.value

        });

    }

    function ajaxGet(url,cb,data){

        // 1.处理data的默认值

        data = data || {};

        // "url?user=admin&pass=123"

        // 2.解析要发送的数据

        var str = "";

        for(var i in data){

            str += `${i}=${data[i]}&`;

        }

        // 3.处理时间戳

        var d = new Date();

        // 4.拼接url，实现数据的发送和时间戳的拼接

        url = url + "?" + str + "__qft="+d.getTime();

        // console.log(url)

        // 5.ajax的正式开启，请求，接收

        var xhr = new XMLHttpRequest();

        xhr.open("GET",url,true);

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){

                cb(xhr.responseText);

            }

        }

        xhr.send();

    }

因为浏览器会优先拿出缓存中的数据，这样我们就不能实现无刷新加载新数据了。所以，拼接时间戳是为了浏览器每次请求的地址都不相同，以此来欺骗浏览器。

然后是post的封装

document.onclick = function(){

        var url = "http://localhost/ajax/data/data.php";

        ajaxPost(url,function(res){

            console.log(res)

        },{

            user:"admin",

            pass:"123123"

        })

    }

    function ajaxPost(url,cb,data){

        data = data || {};

        var str = "";

        for(var i in data){

            str += `${i}=${data[i]}&`;

        }

        // "user=admin&pass=123&"

        // post发送的数据，不在url身上

        var xhr = new XMLHttpRequest();

        // 1.修改ajax的执行方式为post

        xhr.open("post",url,true);

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){

                cb(xhr.responseText)

            }

        }

        // 2.设置发送数据的格式为表单数据

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        // 3.将原来在url身上拼接的数据，交给send发送

        xhr.send(str);

    }

GET+POST的封装如下：

document.onclick = function(){

        ajax({

            // type:"get",                 //发送方式，可选，默认get

            url:"http://localhost/1908/ajax/data/data.php",   //要请求的地址，必选

            success:function(res){         //请求成功之后的函数，必选

                console.log(res)

            },

            // data:{                      //要发送的数据，可选，默认不发

            //     user:"admin",

            //     pass:13123121123

            // },

            // error:function(res){         //请求失败之后的函数，可选，默认不处理

            //     console.log(res)

            // },

            // timeout:10                  //请求超时的时间，可选，默认2000

        })

    }

    function ajax(options){

        // 1.处理默认参数

        var {type,url,success,error,data,timeout} = options;

        type = type || "get";

        data = data || {};

        timeout = timeout || 2000;

        // 2.解析要发送的数据

        var str = "";

        for(var i in data){

            str += `${i}=${data[i]}&`;

        }

        // 3.根据方式，决定是否处理url

        if(type == "get"){

            var d = new Date();

            url = url + "?" + str + "__qft=" + d.getTime();

        }

        // 4.开启ajax

        var xhr = new XMLHttpRequest();

        // 注意：open中的方式

        xhr.open(type,url,true);

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){

                // 5.执行成功之前，先判断是否传入

                success && success(xhr.responseText);

                // 成功之后，不应有失败

                error = null;

            }else if(xhr.readyState == 4 && xhr.status != 200){

                // 6.执行失败之前，先判断是否传入

                error && error(xhr.status);

                // 失败之后，不应有成功

                success = null;

                // 且失败不应多次执行

                error = null;

            }

        }

        // 7.如果请求超时，执行失败

        setTimeout(() => {

            error && error("timeout");

            // 失败之后，不应有成功

            success = null;

        }, timeout);

        // 8.最后根据type的方式，决定send的发送内容和格式

        if(type == "post"){

            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            xhr.send(str)

        }else{

            xhr.send()

        }

    }

封装jsonp：

document.onclick = function(){

        var url = "http://127.0.0.1/jsonp/data/jsonp.php"

        jsonp(url,function(res){

            console.log(res)

        },{

            user:"root"

        })

    }

    function jsonp(url,cb,data){

        data = data || {};

        var str = "";

        for(var i in data){

            str += `${i}=${data[i]}&`;

        }

        var script = document.createElement("script");

        script.src = url + "?" + str;

        document.body.appendChild(script);

        window.fn = function(res){

            console.log(res)

        }

    }

放在博客上主要也是方便自己以后好找。看过的人觉得有点用就好

巴特西

ajax与jsonp中的几个封装函数

最新文章

热门文章