浅析JSONP技术原理及实现


Posted in Javascript onJune 08, 2016

跨域问题一直是前端中常见的问题,每当说到跨域,第一浮现的技术必然就是JSONP

JSONP在我的理解,它并不是ajax,它是在文档中插入一个script标签,创建_callback方法,通过服务器配合执行_callback方法,并传入一些参数

JSONP的局限就在于,因为是通过插入script标签,所以参数只能通过url传入,因此只能满足get请求,特别jQuery的ajax方法时,即使设置type: 'POST',但是只要设置了dataType: 'jsonp',在请求时,都会自动使用GET请求

实现逻辑

step1: 创建_callback方法 (_callback中可以删除script标签和_callback方法)

step2: 插入script标签

step3: 服务器输出js

实现:

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/ 
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_callback方法
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 插入script标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出js
* 类似输出
* _callback({"name":"jsonp","description":"jsonp test"});
*/ 
/*
* 处理error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
});

对于浏览器的行为就是插入script标签,执行js代码, 删除script标签

实现代码并没有考虑兼容以及传入data后生成url的问题。

下面给大家说下jsonp的优缺点:

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

以上所述是小编给大家介绍的浅析JSONP技术原理及实现的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
JS轮播图的实现方法
Aug 24 Javascript
JSONP原理及简单实现
Jun 08 #Javascript
Javascript必知必会(四)js类型转换
Jun 08 #Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 #Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 #Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 #Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 #Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php中strtotime函数性能分析
2016/11/20 PHP
xml和web特殊字符
2009/04/28 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
园林技术专业求职信
2014/07/28 职场文书
赔偿协议书
2015/01/27 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Linux安装apache服务器的配置过程
2021/11/27 Servers
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA