JSONP 再认识

最新推荐文章于 2024-06-20 20:55:24 发布

Fade Away

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量89

点赞数

分类专栏： JSONP

本文链接：https://blog.csdn.net/qq_26239917/article/details/95226451

版权

JSONP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JSONP

1.浏览器端定义函数funtion jsonCallBack()
2.动态创建script src=“服务器地址+jsonCallBack” type=“text/javascript”
3.插入到html标签

4.服务端返回一个字符换内容是一个带参数的回调函数
5.自动执行回调

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="access()">点击</button>
	</body>
	<script type="text/javascript">
		function access() {
			let script = document.createElement("script");
			script.src = "http://localhost:8080/api?cb=callback";
			script.type = "text/javascript";
			let html = document.getElementsByTagName("html")[0];
			html.appendChild(script);
		}

		function callback(data) {
			console.log(data.name)
		}
	</script>
</html>

const express = require("express");
const port = 8080;
const server = express();

server.use("/api",(req,res)=>{
let cb = req.query.cb;
// let fun = cb + "({name:'scobiser'})"
let fun = "callback({name:'scobiser'})"
	res.send(fun)
})

server.listen(port,()=>{
	console.log("server is running at "+port)
})