浅析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 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
js实现3D旋转相册
Aug 02 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
英文自荐信格式
2013/11/28 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
安全生产先进个人总结
2015/02/15 职场文书
创业计划书之寿司
2019/07/19 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers