JSONP原理解析
前言
我工作以来接触的第一个项目就是前后端分离的,前端静态文件有自己独立域名,通过接口来获取数据进行渲染等操作。
跨域的方法不需要多言,随便一搜,就有很多,但最常用不外乎jsonp和CORS。jsonp着重于前端,也算是前端Hack技巧,CORS重于后端,服务端需要配置的地方会较多。
这篇解析一下jsonp的实现原理。
基本原理
基本原理很容易说明白,在html页面中有一些标签是不受跨域限制的,比如img,script,link等。如果把我们需要的数据,放在一个js文件里面,这时,我们就能突破浏览器同源的限制。
创建script标签
《高性能JavaScript》中提到了动态脚本元素,作者写道:
文件在该元素被添加到页面时开始下载。这种技术的重点在于:无论何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。
使用动态脚本节点下载文件时,返回的代码通常会立刻执行(除了Firefox和Oprea,它们会等待此前所有动态脚本节点执行完毕。)当脚本自执行时,这种机制运行正常。
引用1保证了JSONP请求的时候不会阻塞主线程,引用2保证了JSONP代码在加载完成后,立刻自执行时不会出错。
callback
服务端在接收到GET请求之后,通常要判断是否有callback参数,如果有,则需要在返回的数据外面加上一个方法名和括号。例如,发起如下请求:
http://www.a.com/getSomething?callback=jsonp0
那么服务端就会返回如下内容:
jsonp0({code:200,data:{}})
很明显,由于这是在动态加载的Script标签中包含的内容,那么这就是一段自执行代码,这段代码只有一个函数被调用———jsonp0。
当然,有执行,则必须先创建,否则就会报错。创建这一步,就需要在调用前执行。
具体实现如下:
function jsonp (url, successCallback, errorCallback, completeCallback) {
// 声明对象,需要将函数声明至全局作用域
window.jsonp0 = function (data) {
successCallback(data);
if (completeCallback) completeCallback();
}
// 创建script标签,并将url后加上callback参数
var
script = document.createElement('script')
, url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
;
script.src = url;
document.head.parentNode.insertBefore(script, document.head);
// 等到script加载完毕以后,就会自己执行
}
上面基本上完成了一个jsonp方法的核心,此时,jsonp0是我们声明好的一个函数,如果服务端正常回传的时候,就会执行jsonp0函数,里面的successCallback回调也会执行。
完善一下
在实际情况下,通常会有许多个jsonp的请求同时调用,
那么既然jsonp0就能满足我们的需要,为什么常常看到jsonp1,jsonp2等等依次累加的代码呢?
这是因为,请求可能是很多个异步进行。在第一次执行jsonp方法时,window.jsonp0是函数A,此时去加载js文件,在js未加载完毕的情况下,又调用了一次jsonp方法,此时,window.jsonp0指向了函数B。那么等到两次的js加载完毕以后,都会执行第二次的回调。
所以,我们需要对callback的名字做一个区别处理,累加就能满足需要。
修改一下代码:
var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
var jsId = 'jsonp' + jsonpCounter++;
// 声明对象,需要将函数声明至全局作用域
window[jsId] = function (data) {
successCallback(data);
if (completeCallback) completeCallback();
clean();
}
// 创建script标签,并将url后加上callback参数
var
script = document.createElement('script')
, url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
;
script.src = url;
document.head.parentNode.insertBefore(script, document.head);
// 等到script加载完毕以后,就会自己执行
//在执行完我们这个方法以后,会有很多script标签出现在head之前,我们需要手动的删除掉他们。
function clean () {
script.parentNode.removeChild(script);
window[jsId] = function(){};
}
}
加入了累加和清理之后,还有一个重要的地方需要处理,就是错误回调。正常来说,我们通常请求jsonp时,会设定一个超时时间,如果超过这个时间以后,就抛出超时异常。
实现如下:
var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
// 略去上面写过的代码
var
timeout = timeout || 10000
, timer
;
if (timeout) {
timer = setTimeout(function () {
if (errorCallback) {
errorCallback(new Error('timeout'));
}
clean();
}, timeout)
}
function clean () {
script.parentNode.removeChild(script);
window[jsId] = function(){};
if (timer) clearTimeout(timer);
}
}
这样,基本上就完成了jsonp的全部功能,剩下的可能需要做一些兼容的修改,才算是一个完整的jsonp方法。
REFER
- 《高性能JavaScript》
- npm上的一个jsonp实现,JSONP
JSONP原理解析的更多相关文章
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- 【跨域】#001 JSONP原理解析【总结】
一.JSONP 是什么? 1.1 概念 JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料.由于同源策略,一般来说位于 server1 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
- 【转】JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- JSONP跨域的原理解析(转)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- JSONP跨域的原理解析及其实现介绍
JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
- JSONP跨域的原理解析[转]
转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中, ...
随机推荐
- 数据库.MongoDB.安装MongoDB数据库
树莓派安装方法 版本: mongodb 2.4.10 sudo apt-get install mongodb -y 安装完成后,检查命令 mongo 看到下图的内容,表示已安装并启动成功 ===== ...
- 3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...
- .7-Vue源码之AST(3)
上一节到了parseHTML函数,该函数接受一个字符串与一个对象,字符串即对应的DOM,对象包含几个字符串匹配集及3个长函数. 简略梳理部分函数代码如下: // Line-7672 function ...
- ssh分发秘钥时出现错误“Permission denied (publickey,gssapi-keyex,gssapi-with-mic)”
因为公司的服务器连接是通过xshell公钥和密码连接的,今天在ssh分发秘钥的时候出现了,下面的错误: [root@iZ2ze97cumk8opqm28h8Z .ssh]# ssh-copy-id - ...
- CSS浮动(Float)
定义 浮动会使元素向左或向右移动,其周围的元素也会重新排列: 浮动直到它的外边缘碰到包含框或者另一个浮动框才停止: 浮动之后的元素将围绕它,浮动之前的元素不变: 由于浮动框不在文档的普通流中,所以文档 ...
- Spring AOP分析(3) -- CglibAopProxy实现AOP
上文探讨了应用JDK动态代理实现Spring AOP功能的方式,下面将继续探讨Spring AOP功能的另外一种实现方式 -- CGLIB. 首先,来看看类名CglibAopProxy,该类实现了两个 ...
- 实现一个websocket服务器-理论篇
本文是Writing WebSocket servers的中文文档,翻译自MDNWriting WebSocket servers.篇幅略长,个人能力有限难免有所错误,抛砖引玉共同进步. websoc ...
- android 人脸检测你一定会遇到的坑
笔者今年做了一个和人脸有关的android产品,主要是获取摄像头返回的预览数据流,判断该数据流是否包含了人脸,有人脸时显示摄像头预览框,无人脸时摄像头预览框隐藏,看上去这个功能并不复杂,其实在开发过程 ...
- JAVA_读取XML文件
在项目中,很多种情况都需要将一些配置写在xml文件或者properties文件里,便于日后修改配置,好维护等等. 1.新建xml文件 <?xml version="1.0" ...
- C:\WINDOWS\system32\wmp.dll”受到“Windows 系统文件保护”
在VC# 2005 中,要是打包的程序中包含了Windows Media Player 这个组件的话,在生成解决方案的过程中会提示出错: "错误1,应将“wmp.dll”排除,原因是其源文 ...