基于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 相关文章推荐
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php.ini中date.timezone设置分析
2011/07/29 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
python处理csv数据的方法
2015/03/11 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
美术课外活动总结
2014/07/08 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang