浅谈jsonp
要谈jsonp,首先要弄明白jsonp是什么,它是用来干嘛的。jsonp其实就是我们常用的script标签,用来解决跨域的,只不过这个标签是动态创建的,为啥要动态创建涅。
举个小栗子:
假如我们远程文件remote.js是这样的:
handle({result:'我是远程文件派来的数据'})
我们在本地中这样引入:
<script type="text/javascript">
var handle= function(data){
alert(data.result);
};
</script>
<script type="text/javascript" src="跨域服务器/remote.js"></script>
这样就可以把远程文件的result弹出来。那么问题来了,远程js不知道他要调用的本地js函数名怎么办?所以,我们就动态创建一个script,把远程要调用的函数名用callback参数给服务端传过去,相当于告诉服务端,你要调用的本地函数名在callback参数里。像这样
<script type="text/javascript">
var handle= function(data){
alert(data.result);
};
var script = document.createElement('script');
script.src = '跨域服务器/remote?callback=' + handle +'&n=' + Math.random();
</script>
这样一个简易版的jsonp 就算实现了,当然,其实还是可以进行封装一下的,这样想用的时候只要调用就行了:
function jsonp(url, data = {}, callback = 'callback') {
function handle(param) {
var str = ''; //处理参数
for (var key in param) {
str = str + '&' + key + '=' + param[key];
}
return str;
}
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
window[callback] = function (json) {
if (json) {
resolve(json);
}
}
script.src = url + '?callback=' + callback + handle(data) + '&n=' + Date.now();
document.body.appendChild(script);
})
}
浅谈jsonp的更多相关文章
- 浅谈JSONP (vue-jsonp组件 XXXtoken:报错处理)
由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用jsonp,则不存在这个问题. 主要是因为jsonp是在页面中插入一段js代码,而请求返回的也是一段js ...
- 浅谈 JSONP
说起跨域的解决方案,总是会说到 JSONP,但是很多时候都没有仔细去了解过 JSONP,可能是因为现在 JSONP 用的不是很多(多数时候都是配置响应头实现跨域),也可能是因为用 JSONP 的场景一 ...
- 浅谈JSONP 的本质工作原理
json 是一种数据格式jsonp 是一种数据调用的方式. 你可以简单的理解为 带callback的json就是jsonp 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, 这就是所谓的跨域 ...
- 浅谈JSONP 的工作原理
小编最近在工作中经常用到 jsonp 这个东西, 表示之前从来没用过 最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~ 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, ...
- 浅谈Hybrid技术的设计与实现
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...
- 浅谈前后端分离与实践 之 nodejs 中间层服务(二)
一.背景 书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...
- (转)浅谈Hybrid技术的设计与实现
转载地址:https://www.cnblogs.com/yexiaochai/p/4921635.html 前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hyb ...
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- 浅谈MVC、MVP、MVVM
MVC M: Model 模型——数据 (对于前台而言例如:ajax.jsonp等从后台获取数据的) V: View 视图——表现 ...
随机推荐
- iptables,lokkit,ebtables,arptables---logrotate
iptables,lokkit,ebtables,arptables logrotate 这五个位置也被称为五个钩子函数(hook functions),也叫五个规则链. 1.PREROUTING ...
- Qt::浅谈信号槽连接,参数在多线程中的使用
Qt的信号槽有五种连接方式定义在enum Qt::ConnectionType,下面简单介绍 Qt::AutoConnection:自动判断连接方式,如果信号发送对象和执行槽对象在同一线程,那么等于Q ...
- 无题II---hdu2236(二分,匈牙利)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2236 要求最大值与最小值的差值最小,是通过枚举边的下限和上限来完成 只需要用二分找一个区间,然后不断枚 ...
- uchome 常用函数示例
一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...
- EasyUI Resizable 可调整尺寸
通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...
- Docker Compose 入门使用指南
Compose is a tool for defining and running multi-container Docker applications. With Compose, you us ...
- CentOS7.0安装Nginx 1.10.0
首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib-devel ...
- PAT 1065 A+B and C[大数运算][溢出]
1065 A+B and C (64bit)(20 分) Given three integers A, B and C in [−263,263], you are supposed t ...
- Linux查看系统版本信息
1.查看操作系统相关信息 uname -a 2.查看正在运行的内核版本信息 cat /proc/version //uname -r 3.查看发行版本号 (适用于所有的linux,包括Redhat. ...
- hive表与外部表的区别
相信很多用户都用过关系型数据库,我们可以在关系型数据库里面创建表(create table),这里要讨论的表和关系型数据库中的表在概念上很类似.我们可以用下面的语句在Hive里面创建一个表: hive ...