原生JS简单封装JSONP跨域获取数据

更新日期: 2020-03-08阅读: 1.8k标签: 跨域

原生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是提供的回调函数容易重名,又在每次执行完成后销毁回调函数减少代码冗余。

<script>
/*
* 封装JSONP
* url: 跨域地址
* callback:处理数据的回调函数
*/
function getJSONP(url, callback) {
if (!url) { // url为空,则退出
return;
}

// 随机生成工具函数的函数名
var fnName = '_JSONP'+ parseInt(Math.random()*100);
// 将这个没有赋值的函数名变成getJSONP的属性,因为函数名是以字符串形式提交,因此此处更改之后url中提交的形式为cb=getJSONP._JSONPXX。XX为两个随机生成的数字
var jsonp_attr = 'getJSONP.' + fnName;

// 判断url地址中是否含有'?'
// 百度服务器JSONP回调函数key属性是'cb',为配合下边链接,这里用'cb=',实际情况根据服务器提供的接口更改
if (url.indexOf('?') === -1) {
url += '?cb=' + jsonp_attr;
}
else{
url += '&cb=' + jsonp_attr;
}



// 动态创建script标签
var script = document.createElement('script');
// 为script标签src属性赋值
script.src = url;

// 定义工具函数,并将工具函数赋给getJSONP的属性fnName
getJSONP[fnName] = function (data) {
try {
// 跨域成功,通过回调函数,处理数据
callback && callback(data);
} catch (error) {
//
}
finally{
// 数据处理完成后,删除工具函数,以及实现跨域用的动态生成的script标签
delete getJSONP[fnName];
script.parentNode.removeChild(script);
}
}


// 将动态生成的script标签添加到DOM,这一步发出跨域请求
document.getElementsByTagName('head')[0].appendChild(script);
}

// 使用封装好的getJSONP函数
// 获取在百度搜索栏输入"iPhone"时,自动完成功能返回的数据,注意将原来链接中回调删除
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) {
console.log(data);
});
</script>



链接: https://www.fly63.com/article/detial/8891

web网站ajax跨域方法总结与解决方案

web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。

使用CSS3特性做跨域,跨域还可以这样玩

利用js动态创建一个link插入到文档中, 请求css文件,利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象,利用 computedStyle .content 获取内容

Js通过Web代理发起跨域请求

XMLHttpRequest对象(IE中为XMLHTTP对象)是AJAX应用的核心。由于现代浏览器对跨域请求的限制,在使用时需多加注意。本教程尽量用简单易懂的话描述(跨域)问题,并提供一个方案:通过Web代理(Web Proxy)

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!