基于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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
小程序实现留言板
Nov 02 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
js定时器实例分享
2016/12/20 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python实现括号匹配的思路详解
2018/08/23 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
八月一日观后感
2015/06/10 职场文书
保护环境建议书作文400字
2015/09/14 职场文书