BNTang

JSONP封裝

本文內容過于簡陋，只是單純的記錄一下 JSONP 的封裝代碼：

myJsonp.js

function obj2str(obj) {
    // 生成隨機因子
    obj.t = (Math.random() + "").replace(".", "");
    let arr = [];
    for (let key in obj) {
        arr.push(key + "=" + encodeURI(obj[key]));
    }
    return arr.join("&");
    // console.log(str);
    // return str;
}

function myJSONP(options) {
    options = options || {};

    // http://127.0.0.1/jQuery/Ajax/22-jsonp.php?cb=BNTang&teacher=BNTang&age=34&_=1559735634387
    // http://127.0.0.1/jQuery/Ajax/22-jsonp.php?cb=BNTang&teacher=BNTang&age=34&t=08520581619221432
    // 1.生成URL地址
    let url = options.url;
    if (options.jsonp) {
        url += "?" + options.jsonp + "=";
    } else {
        url += "?callback=";
    }

    let callbackName = ("jQuery" + Math.random()).replace(".", "");
    if (options.jsonpCallback) {
        callbackName = options.jsonpCallback;
        url += options.jsonpCallback;
    } else {
        // console.log(callbackName);
        url += callbackName;
    }
    if (options.data) {
        let str = obj2str(options.data);
        url += "&" + str;
    }
    // console.log(url);

    // 2.獲取跨域的數據
    let oScript = document.createElement("script");
    oScript.src = url;
    document.body.appendChild(oScript);

    // 3.定義回調函數
    window[callbackName] = function (data) {
        // 刪除已經獲取了數據的script標簽
        document.body.removeChild(oScript);

        // 將獲取到的數據返回給外界
        options.success(data);
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP封裝</title>
</head>
<body>
<script src="myJsonp.js"></script>
<script>
    myJSONP({
        url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
        data: {
            "teacher": "BNTang",
            "age": 34
        },
        // 告訴jQuery服務器在獲取回調函數名稱的時候需要用什么key來獲取
        jsonp: "cb",
        // 告訴jQuery服務器在獲取回調函數名稱的時候回調函數的名稱是什么
        jsonpCallback: "BNTang",
        success: function (msg) {
            console.log(msg);
        }
    });
</script>
</body>
</html>

posted @ 2022-03-01 22:13 BNTang 閱讀(53) 評論(0) 收藏舉報

刷新頁面返回頂部

BNTang

JSONP封裝

公告