内容简介:用原生JS封装一个简单的JSONP,主要是用来理解前端是怎么实现JSONP的。JSONP跨域是借助<img><script>的src属性,<link>的href属性能够链接外部网站,来实现跨域请求数据。将跨域请求的链接和参数以链接的方式提交给服务器,同时在链接中附带本地接收JSONP数据函数的函数名,当服务器查找数据完毕后,调用该函数,并将数据以函数参数形式传出。
用原生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>
以上所述就是小编给大家介绍的《原生JS简单封装JSONP跨域获取数据》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- ios - 原生骨架库,网络过渡动画封装
- 原生es6封装一个Promise对象
- 原生es5封装的Promise对象
- ios - 原生骨架屏,网络加载过渡动画的封装
- 基于原生fetch封装一个带有拦截器功能的fetch,类似axios的拦截器
- 封装一个原生js的ajax请求,支持IE9CORS跨域请求
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。