基于JSONP原理解析(推荐)


Posted in Javascript onDecember 04, 2017

前言

我工作以来接触的第一个项目就是前后端分离的,前端静态文件有自己独立域名,通过接口来获取数据进行渲染等操作。

跨域的方法不需要多言,随便一搜,就有很多,但最常用不外乎jsonp和CORS。jsonp着重于前端,也算是前端Hack技巧,CORS重于后端,服务端需要配置的地方会较多。

这篇解析一下jsonp的实现原理。

基本原理

基本原理很容易说明白,在html页面中有一些标签是不受跨域限制的,比如img,script,link等。如果把我们需要的数据,放在一个js文件里面,这时,我们就能突破浏览器同源的限制。

创建script标签

《高性能JavaScript》中提到了动态脚本元素,作者写道:

1、文件在该元素被添加到页面时开始下载。这种技术的重点在于:无论何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。

2、使用动态脚本节点下载文件时,返回的代码通常会立刻执行(除了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原理解析(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
详解微信UnionID作用
May 15 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
js实现验证码功能
Jul 24 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 #Javascript
Angular之toDoList的实现代码示例
Dec 02 #Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 #Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
You might like
php 禁止页面缓存输出
2009/01/07 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python找出因数与质因数的方法
2019/07/25 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
交通事故检查书范文
2014/01/30 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
《称赞》教学反思
2016/02/17 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python