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  阅读(40)  评论(0)  编辑  收藏  举报