浅谈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 视图——表现 ...
随机推荐
- python基础之递归、二分法
一 递归 1. 必须有一个明确的结束条件2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少3. 递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用是通过栈(stack)这种数据结 ...
- 10.Git远程仓库
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了.可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Git ...
- centos shell编程4【分发系统】 服务器标准化 mkpasswd 生成密码的工具 expect讲解 expect传递参数 expect自动同步文件 expect指定host和要同步的文件 expect文件分发系统 expect自动发送密钥脚本 Linux脚本执行方式 第三十八节课
centos shell编程4[分发系统] 服务器标准化 mkpasswd 生成密码的工具 expect讲解 expect传递参数 expect自动同步文件 expect指定host和要 ...
- 数据库触发器,禁止DDL操作
CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREAT ...
- WebMagic简介和使用
概览 WebMagic是一款简单灵活的爬虫框架.基于它你可以很容易的编写一个爬虫. WebMagic项目代码分为核心和扩展两部分. 核心部分(webmagic-core)是一个精简的.模块化的爬虫实现 ...
- Teigha.net读写dwg文件显示
官网:http://www.opendesign.com/ http://www.cnblogs.com/zhanglibo0626/archive/2011/11/04/2236238.html 下 ...
- SLAM FOR DUMMIES 第5-8章 中文翻译
5,SLAM的处理过程 SLAM过程包括许多步骤,该过程的目标是使用环境更新机器人的位置.由于机器人的里程计通常是存在误差的,我们不能直接依赖于里程计.我们可以用激光扫描环境来校正机器人的位置,这是通 ...
- OPENSSL编程 (secure shell, ssh)
很好的 OPENSSL编程 教程,名字就叫“OPENSSL编程” 它里面还有很多关于密码学的东西. http://www.pengshuo.me http://www.pengshuo.me/2014 ...
- VMware跨电脑移动Linux虚拟机
环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 概况 vmware自带的快照,克隆功能,都可以实现备份虚拟机的功能, ...
- CSV文件读取类
最近项目中,经常需要读取Csv文件.基本步骤是: (1)按行读取 (2)然后将一行数据按逗号,分割为字符串数组 (3)将各列字符串转换成相应类型的数据 ,如int double类型 写了一个简单的Cs ...