原生JS简单封装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>