要谈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的更多相关文章

  1. 浅谈JSONP (vue-jsonp组件 XXXtoken:报错处理)

    由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用jsonp,则不存在这个问题. 主要是因为jsonp是在页面中插入一段js代码,而请求返回的也是一段js ...

  2. 浅谈 JSONP

    说起跨域的解决方案,总是会说到 JSONP,但是很多时候都没有仔细去了解过 JSONP,可能是因为现在 JSONP 用的不是很多(多数时候都是配置响应头实现跨域),也可能是因为用 JSONP 的场景一 ...

  3. 浅谈JSONP 的本质工作原理

    json 是一种数据格式jsonp 是一种数据调用的方式. 你可以简单的理解为 带callback的json就是jsonp 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, 这就是所谓的跨域 ...

  4. 浅谈JSONP 的工作原理

    小编最近在工作中经常用到 jsonp 这个东西, 表示之前从来没用过  最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~ 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, ...

  5. 浅谈Hybrid技术的设计与实现

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...

  6. 浅谈前后端分离与实践 之 nodejs 中间层服务(二)

    一.背景 书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...

  7. (转)浅谈Hybrid技术的设计与实现

    转载地址:https://www.cnblogs.com/yexiaochai/p/4921635.html 前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hyb ...

  8. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  9. 浅谈MVC、MVP、MVVM

    MVC M: Model            模型——数据            (对于前台而言例如:ajax.jsonp等从后台获取数据的) V:  View             视图——表现 ...

随机推荐

  1. iptables,lokkit,ebtables,arptables---logrotate

    iptables,lokkit,ebtables,arptables logrotate  这五个位置也被称为五个钩子函数(hook functions),也叫五个规则链. 1.PREROUTING ...

  2. Qt::浅谈信号槽连接,参数在多线程中的使用

    Qt的信号槽有五种连接方式定义在enum Qt::ConnectionType,下面简单介绍 Qt::AutoConnection:自动判断连接方式,如果信号发送对象和执行槽对象在同一线程,那么等于Q ...

  3. 无题II---hdu2236(二分,匈牙利)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2236 要求最大值与最小值的差值最小,是通过枚举边的下限和上限来完成 只需要用二分找一个区间,然后不断枚 ...

  4. uchome 常用函数示例

    一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...

  5. EasyUI Resizable 可调整尺寸

    通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...

  6. Docker Compose 入门使用指南

    Compose is a tool for defining and running multi-container Docker applications. With Compose, you us ...

  7. CentOS7.0安装Nginx 1.10.0

    首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib-devel ...

  8. PAT 1065 A+B and C[大数运算][溢出]

    1065 A+B and C (64bit)(20 分) Given three integers A, B and C in [−2​63​​,2​63​​], you are supposed t ...

  9. Linux查看系统版本信息

    1.查看操作系统相关信息 uname -a 2.查看正在运行的内核版本信息 cat /proc/version //uname -r 3.查看发行版本号  (适用于所有的linux,包括Redhat. ...

  10. hive表与外部表的区别

    相信很多用户都用过关系型数据库,我们可以在关系型数据库里面创建表(create table),这里要讨论的表和关系型数据库中的表在概念上很类似.我们可以用下面的语句在Hive里面创建一个表: hive ...