jsonp原理学习笔记

PS：根据B站学习视频 jsonp原理 学习整理，如有错误，欢迎随时指正，互相学习。

JSONP

JSON with padding —— 填充式 JSON

原理

script 、link 、img 可以进行跨域请求并成功接收响应。

// 服务端代码
// 引入支持接受请求，返回响应的模块 http
const http = require("http");
// 创建服务端程序实例
http.creatServer(
	// 每次请求自动调用回调函数
    (req,res) => {
        var data = '111';
        res.write(data);
        res.end();
    }
).listen(3000);// 端口号

<!-- 前端代码 -->
<script src="http://localhost:3000"></script> <!-- 报错 -->

问题：script接收到数据后会被 js 引擎进行解析，所以只接收响应结果为 js 语句。上面只返回了字符串为 111 的数据，所以前端报语法错误 。

解决：于是我们将要返回的数据填充进一段合法的 js 语句中。

// 服务端
var data = '111';
res.write(`alert("${data}")`);// 填充
res.end();

<!-- 前端代码 -->
<script src="http://localhost:3000"></script> <!-- 弹出 111 -->

问题：我们一旦对数据的处理方式进行改变，比如：把 alert 改为 console.log，就需要到服务端更改代码，所以我们不能把代码写死。

解决：我们先在定义一个函数，里面执行我们的逻辑代码，并在后端进行函数的传参，再将函数执行语句返回。

// 服务端
var data = '111';
res.write(`show("${data}")`);// 函数执行语句
res.end();

<script>
	function show(result) { 
        // ...执行逻辑代码
    }
</script>
<!-- 前端代码 -->
<script src="http://localhost:3000"></script> <!-- show(data) -->

问题：函数名本应在前端进行定义，但在服务端写死了，导致前后端必须一致，不够灵活，一旦函数名错误，很难排查。

解决：我们通过请求参数将函数名传递给服务器，这样服务端接收请求参数并动态添加到要返回的函数执行语句中就可以了。

// 服务端
const url = require("url"); // 引入 url 模块
// 创建服务端程序实例
http.creatServer(
	// 每次请求自动调用回调函数
    (req,res) => {
        var callback = url.parse(req.url,true).query.callback;
        var data = '111';
        res.write(`${callback}("${data}")`);// 函数执行语句
        res.end();
    }
).listen(3000);// 端口号

<!-- 前端代码 -->
<script src="http://localhost:3000?callback=show"></script> <!-- show(data) -->

问题：script 是在页面中写死的，只能在页面加载的过程中执行一次，无法按需发起请求，比如点击按钮发起请求。

解决：动态创建 script 标签，并添加到页面中，在函数执行完成之前删除动态添加到页面中的 script 标签。

// 前端代码
btn.click(() => {
    var script = document.createElement("script");// 创建 scrip 标签
    script.src = `http://localhost:3000?callback=show`;// 添加 src 请求路径
    document.body.appendChild(script);
});
function show(result) {
    // ...
    // 在最后获取 script 标签并删除
}