JSONP原理及简单实现


Posted in Javascript onJune 08, 2016

在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能。然而由于受到浏览器的限制,ajax不允许跨域通信。

JSONP就是目前主流的实现跨域通信的解决方案。

虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现跨域请求的。如:

<script src="http://jsonp.js?callback=xxx"></script>

callback定义了一个函数名,而远程服务端通过调用指定的函数并传入参数来实现传递参数。

搜索了网上好多文章,他们实现方法都过于简单,要实际应用还要多加修改,我在这里封装了一个对象,可以直接运用于实际操作。

var JSONP = {
// 获取当前时间戳
now: function() {
return (new Date()).getTime();
},
// 获取16位随机数
rand: function() {
return Math.random().toString().substr(2);
},
// 删除节点元素
removeElem: function(elem) {
var parent = elem.parentNode;
if(parent && parent.nodeType !== 11) {
parent.removeChild(elem);
}
},
// url组装
parseData: function(data) {
var ret = "";
if(typeof data === "string") {
ret = data;
}
else if(typeof data === "object") {
for(var key in data) {
ret += "&" + key + "=" + encodeURIComponent(data[key]);
}
}
// 加个时间戳,防止缓存
ret += "&_time=" + this.now();
ret = ret.substr(1);
return ret;
},
getJSON: function(url, data, func) {
// 函数名称
var name;
// 拼装url
url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
// 检测callback的函数名是否已经定义
var match = /callback=(\w+)/.exec(url);
if(match && match[1]) {
name = match[1];
} else {
// 如果未定义函数名的话随机成一个函数名
// 随机生成的函数名通过时间戳拼16位随机数的方式,重名的概率基本为0
// 如:jsonp_1355750852040_8260732076596469
name = "jsonp_" + this.now() + '_' + this.rand();
// 把callback中的?替换成函数名
url = url.replace("callback=?", "callback="+name);
// 处理?被encode的情况
url = url.replace("callback=%3F", "callback="+name);
}
// 创建一个script元素
var script = document.createElement("script");
script.type = "text/javascript";
// 设置要远程的url
script.src = url;
// 设置id,为了后面可以删除这个元素
script.id = "id_" + name;
// 把传进来的函数重新组装,并把它设置为全局函数,远程就是调用这个函数
window[name] = function(json) {
// 执行这个函数后,要销毁这个函数
window[name] = undefined;
// 获取这个script的元素
var elem = document.getElementById("id_" + name);
// 删除head里面插入的script,这三步都是为了不影响污染整个DOM啊
JSONP.removeElem(elem);
// 执行传入的的函数
func(json);
};
// 在head里面插入script元素
var head = document.getElementsByTagName("head");
if(head && head[0]) {
head[0].appendChild(script);
}
}
};

实现过程基本写在注释里啦,自己看。调用的方法跟jQuery基本一样。如:

var data = {
from: "北京",
count: 27,
output: "json",
callback: "?"
}
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});

当然要这么写也行:

JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});

至于服务端的实现,那就比较简单了,以php为例:

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'( .json_encode( $data ).')';

ajax与jsonp的异同再做一些补充说明:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

好了,写完了,有什么问题欢迎讨论。

Javascript 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 #Javascript
You might like
php 参数过滤、数据过滤详解
2015/10/26 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
学生信息管理系统python版
2018/10/17 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
商务英语毕业生自荐信范文
2013/11/08 职场文书
文员岗位职责
2013/11/09 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python