本文内容过于简陋，只是单纯的记录一下 JSONP 的封装代码：
myJsonp.js
代码语言：javascript复制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
代码语言：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>我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
