要谈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. python基础之递归、二分法

    一 递归 1. 必须有一个明确的结束条件2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少3. 递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用是通过栈(stack)这种数据结 ...

  2. 10.Git远程仓库

    到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了.可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Git ...

  3. centos shell编程4【分发系统】 服务器标准化 mkpasswd 生成密码的工具 expect讲解 expect传递参数 expect自动同步文件 expect指定host和要同步的文件 expect文件分发系统 expect自动发送密钥脚本 Linux脚本执行方式 第三十八节课

    centos shell编程4[分发系统] 服务器标准化  mkpasswd 生成密码的工具  expect讲解   expect传递参数   expect自动同步文件  expect指定host和要 ...

  4. 数据库触发器,禁止DDL操作

    CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREAT ...

  5. WebMagic简介和使用

    概览 WebMagic是一款简单灵活的爬虫框架.基于它你可以很容易的编写一个爬虫. WebMagic项目代码分为核心和扩展两部分. 核心部分(webmagic-core)是一个精简的.模块化的爬虫实现 ...

  6. Teigha.net读写dwg文件显示

    官网:http://www.opendesign.com/ http://www.cnblogs.com/zhanglibo0626/archive/2011/11/04/2236238.html 下 ...

  7. SLAM FOR DUMMIES 第5-8章 中文翻译

    5,SLAM的处理过程 SLAM过程包括许多步骤,该过程的目标是使用环境更新机器人的位置.由于机器人的里程计通常是存在误差的,我们不能直接依赖于里程计.我们可以用激光扫描环境来校正机器人的位置,这是通 ...

  8. OPENSSL编程 (secure shell, ssh)

    很好的 OPENSSL编程 教程,名字就叫“OPENSSL编程” 它里面还有很多关于密码学的东西. http://www.pengshuo.me http://www.pengshuo.me/2014 ...

  9. VMware跨电脑移动Linux虚拟机

    环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 概况 vmware自带的快照,克隆功能,都可以实现备份虚拟机的功能, ...

  10. CSV文件读取类

    最近项目中,经常需要读取Csv文件.基本步骤是: (1)按行读取 (2)然后将一行数据按逗号,分割为字符串数组 (3)将各列字符串转换成相应类型的数据 ,如int double类型 写了一个简单的Cs ...