前言
? ? ? ? 在初步接触jsonp的时候是在客户端，那时候了解的非常的浅显，只不过是从表象去了解和使用了jsonp ，只知道是是用src导入了一个js脚本,它的原理是什么对于当时的我来说还是很难理解的，直到我学习了node.js自己写了一个jsonp请求。
客户端的jsonp
<button type="button" class="layui-btn layui-btn layui-btn-normal" id="btnJsonp">Jsonp请求</button>
<!-- 导入jQuery -->
<script src="./jQuery3.6.0.min.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<script>
$(function() {
$('#btnJsonp').on('click', function() {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
jsonpCallback: 'success',
success: function(res) {
console.log(res);
}
});
});
});
</script>
? ? ? ? 启动自己的服务器，按下jsonp按钮就可以发送一个jsonp的跨域请求了；jQuery封装，原理就是动态的生成和删除一个<script src="http://127.0.0.1/api/jsonp"></script> . 可以观察一下ajax的配置项，里面设置了一个jsonpCallback: 'success', 这是用来告诉服务器回调函数名字的这很重要
服务器的jsonp路由
// 导入express
const express = require('express');
// 到入路由模块
const apiRouter = require('./apiRouter');
// 导入cors包
const cors = require('cors');
// 实例server
const app = express();
// 配置jsonp接口 必须写在cors之前否则会变成cors接口
app.get('/api/jsonp', (req, res) => {
// TODO 定义jsonp的具体实现过程
// 1 获取客户端发送回来的callback名字
let callback = req.query.callback;
console.log(req.query);
let data = {
name: '张三',
age: 22
};
// 拼接一个函数调用的字符串
let Str = `${callback}(${JSON.stringify(data)})`;
// 把拼接好的字符串交给script解析
res.send(Str);
});
? ? ? ? 这就是核心代码了，可以看到jsonp挂载到server（app）的一个get请求方式的路由，可以在函数内看到 用?let callback = req.query.callback; 获得了回调函数的名字，并且响应出去的Str是用字符串表达的一个以callback命名的函数,将所需要传递出去的参数以形参的形式随着函数发送出去，为什么要这么做呢？？
1 为什么不直接传递参数出来如：res.send({name: '张三',age: 22});
? ? ? ? 参数确实是可以传出来的但是客户端无法接受，script标签本质是引入了一段js代码它会立刻被执行；
2 为什么不直接传一个变量出来如:?res.send(let obj = {name: '张三',age: 22});
? ? ? ? 变量确实也能被传出来在客户端使用的时候只需要在这个script标签下面接收一下：
<script>
console.log(obj)
</script>
但是这个变量是在服务器写好的，但是却在客户端使用，大概率会造成变量污染特别是当代码量一多的时候
3? 为解决变量冲突我们很容易就想到局部变量就是写在函数里的形参，但这里有需要解决一个问题，客户端并不知道服务器响应出来函数名字，不知道就无法使用，必须解决函数名字的问题
? ? ? ? 这里程序员前辈就想到了用url将函数的名字传出去？callback = ？？？定义了这种格式，在服务器动态拼接函数名字创建函数，客户端用相同的函数名进行接收这时后形参参数也就被传递出来了，由于函数不调用就不会被执行，就可以在客户端放心使用本函数了。——到这里就是完整的jsonp请求了。
?
?
|