浅析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 相关文章推荐
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JS代码编译器Monaco使用方法
Jun 11 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防攻击代码升级版
2010/12/29 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
理解Python垃圾回收机制
2016/02/12 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python基础之入门必看操作
2017/07/26 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
基于python监控程序是否关闭
2020/01/14 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
司法助理专业自荐书
2014/06/13 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
企业法人代表证明书
2014/09/27 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书