封装一个JSONP请求

Posted 2020-09-04

首先，先介绍下jsonp的跨域原理：

1、 动态创建script标签
2、 利用 script 的src属性，会自动发送请求
3、 只需要将要请求的地址设置为 script标签的src属性的值
4、 需要服务端的接口配合，必须返回 JSONP 格式的数据才行

注意：

1、 需要有个支持 JSONP 请求的接口地址
2、 我们指定回调函数的名称
3、 我们写一个 与回调函数名称 相同的函数
4、 通过这个函数的参数就可以获取到服务器返回的数据了！！！
5、 这个函数只能写在全局环境中！！

 1 function jsonp(url, params, callback) {
 2             url += ‘?‘;
 3 
 4             for(var k in params) {
 5                 url += k + ‘=‘ + params[k] + ‘&‘
 6             }
 7 
 8             // 随机生成一个不重复的函数名
 9             var callbackName = ‘ivy_‘ + (new Date - 0);
10             url += ‘callback=‘ + callbackName;
11             // 根据生成的函数名，让这个函数称为一个全局函数
12             window[callbackName] = function( data ) {
13                 // console.log( data );
14                 callback( data );
15 
16                 // 获取到数据后，就可以将script标签以及函数都销毁掉
17                 document.head.removeChild( script );
18                 delete window[callbackName];
19             };
20 
21             // 动态创建script
22             // 浏览器会自动发送请求，请求接口
23             var script = document.createElement(‘script‘);
24             script.src = url;
25             document.head.appendChild( script );
26 
27         }