ajax與jsonp中的幾個封裝函數

時間 2019-11-18

標籤 ajax jsonp 幾個封裝函數欄目 Ajax 简体版

原文原文鏈接

首先是ajax裏的getphp

在頁面上添加幾個標籤用做測試ajax

<body>
    <input type="text" id="user">
    <input type="text" id="pass">
    <input type="button" id="btn">
</body>

js部分：json

    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的封裝以下：app

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)
        }

    }