浅析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参数列表集合
Apr 06 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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/07/08 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
php实现微信模板消息推送
2018/03/30 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
Js面试算法详解
2018/04/08 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python实现视频读取和转化图片
2019/12/10 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
小区门卫岗位职责
2013/12/31 职场文书
银行资信证明
2015/06/17 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python