用原生JS封装一个简单的JSONP，主要是用来理解前端是怎么实现JSONP的。
JSONP跨域是借助<img><script>的src属性，<link>的href属性能够链接外部网站，来实现跨域请求数据。
将跨域请求的链接和参数以链接的方式提交给服务器，同时在链接中附带本地接收JSONP数据函数的函数名，当服务器查找数据完毕后，调用该函数，并将数据以函数参数形式传出。
首先，使用使用JSONP跨域，不是直接返回一个数据对象，而是本地向服务器提供一个可供调用的函数fn，由服务器调用，并跨域请求的数据对象注入fn的参数。也就是说，跨域请求数据，是将本地用来接受JSONP数据对象的函数的函数名提交给服务器，由服务器来调用。
其次，因为网页中会频繁使用到JSONP，本地用来接收JSONP数据的函数将会有很多，从而导致代码冗余，占用资源。
因此，采取以下方法接收JSONP跨域请求得到的数据：
1、在封装函数Fun中随机生成一个变量名fn；
2、将fn保存为封装函数Fun的属性(即：Fun[fn])，或者window的全局属性；
3、将fn提交给服务器做为本地接收JSONP函数的函数名；
4、定义本地接收JSONP数据的匿名函数，并将匿名函数赋值给封装函数Fun的属性fn(Fun[fn] = function(data){...})；
5、将匿名函数中接收到的data传出，或在匿名函数中调用封装函数传入的回调函数(如果有的话);
6、删除Fun[fn]属性，也就是销毁接收函数。
这样，既解决本地用来接收JSONP是提供的回调函数容易重名，又在每次执行完成后销毁回调函数减少代码冗余。
1 <script>
2 /*
3 * 封装JSONP
4 * url: 跨域地址
5 * callback：处理数据的回调函数
6 */
7 function getJSONP(url, callback) {
8 if (!url) { // url为空，则退出
9 return;
10 }
11
12 // 随机生成工具函数的函数名
13 var fnName = '_JSONP'+ parseInt(Math.random()*100);
14 // 将这个没有赋值的函数名变成getJSONP的属性，因为函数名是以字符串形式提交，因此此处更改之后url中提交的形式为cb=getJSONP._JSONPXX。XX为两个随机生成的数字
15 var jsonp_attr = 'getJSONP.' + fnName;
16
17 // 判断url地址中是否含有'?'
18 // 百度服务器JSONP回调函数key属性是'cb'，为配合下边链接，这里用'cb=',实际情况根据服务器提供的接口更改
19 if (url.indexOf('?') === -1) {
20 url += '?cb=' + jsonp_attr;
21 }
22 else{
23 url += '&cb=' + jsonp_attr;
24 }
25
26
27
28 // 动态创建script标签
29 var script = document.createElement('script');
30 // 为script标签src属性赋值
31 script.src = url;
32
33 // 定义工具函数，并将工具函数赋给getJSONP的属性fnName
34 getJSONP[fnName] = function (data) {
35 try {
36 // 跨域成功，通过回调函数，处理数据
37 callback && callback(data);
38 } catch (error) {
39 //
40 }
41 finally{
42 // 数据处理完成后，删除工具函数，以及实现跨域用的动态生成的script标签
43 delete getJSONP[fnName];
44 script.parentNode.removeChild(script);
45 }
46 }
47
48
49 // 将动态生成的script标签添加到DOM，这一步发出跨域请求
50 document.getElementsByTagName('head')[0].appendChild(script);
51 }
52
53 // 使用封装好的getJSONP函数
54 // 获取在百度搜索栏输入"iPhone"时，自动完成功能返回的数据，注意将原来链接中回调删除
55 getJSONP('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1436,31325,21091,31424,31341,31464,30824,31164&wd=iPhone&req=2&csor=6&pwd=iph&_=1588427887099', function (data) {
56 console.log(data);
57 });
58 </script>
来源：oschina
链接：https://my.oschina.net/u/4407103/blog/4262669