封装一个JSONP请求

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装一个JSONP请求相关的知识,希望对你有一定的参考价值。

首先,先介绍下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         }

 

以上是关于封装一个JSONP请求的主要内容,如果未能解决你的问题,请参考以下文章

封装一个JSONP请求

封装 jsonp请求数据的方法

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

jQuery封装的ajax方法发送jsonp请求ajax全局事件restful风格的api获取XML数据