要谈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. 如何在不改SQL的情况下优化数据库

    主题简介 在数据库运维中我们会遇到各种各样的问题,这些问题的根源可能很明显,也可能被某种表象掩盖而使我们认不清.所以运维面临的两大问题就是,第一我们没有看清本质,第二应用不允许修改.那么我们如何解决这 ...

  2. android data recovery and nc

    目录下会出现mmcblk0.raw文件,文件大小等于手机内部存储空间的大小,该文件正是手机内部存储空间的镜像文件. 第七步,打开一款传统的数据恢复工具,由于raw文件是linux文件系统格式,因此需要 ...

  3. 【Linux学习 】Linux使用Script命令来记录并回放终端会话

    一背景 二script命令简介 1 什么script命令 2 script命令操作 21 file选项 22 options选项 23 退出script 三Script命令结合实际使用场景 1 先在终 ...

  4. 【python】Python3 循环语句

    [python]几种常见的循环 注意:如果涉及到程序中print语句中含有%d,%s,那么要在脚本最开始写语句:#coding=utf-8,才能够正常输出想要的数字或者字符串. Python3 循环语 ...

  5. Mirror--镜像使用的工作线程数

    /*在SQL SERVER 2005 及以后版本中, 使用'MAXworker thread' 来配置可用的线程数,默认设置为0 ,即自动控制线程数 计算最大工作线程数: 对于32 位系统:逻辑CPU ...

  6. java 字节流和字符流转换类InputStreamReader,OutPutStreamReader

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  7. python学习之路-day8

    一.接口与归一化设计 1.什么是接口 调用某个功能的方法/方式/入口 2.为什么要用接口 接口提取了一群类共同的函数,可以把接口当做一个函数的集合. 然后让子类去实现接口中的函数. 这么做的意义在于归 ...

  8. (27)Cocos2d-x 3.0 Json用法

    Cocos2d-x 3.0 加入了rapidjson库用于json解析.位于external/json下. rapidjson 项目地址:http://code.google.com/p/rapidj ...

  9. CyclicBarrier实现流水处理服务类

    package com.yzu.zhang.thread.concurrent; import java.util.Map.Entry; import java.util.Random; import ...

  10. linux时区问题

    时区问题很麻烦- 0.查看时间命令 #date 查看系统时间 #date -s 修改时间,看下面的例子 #// (将系统日期设定为2014年07月16日) #:: (将系统时间设定为下午11::) # ...