jQuery中getJSON跨域原理的深入讲解


Posted in jQuery onSeptember 02, 2020

前几天我在开发一个工具的时候,其中有个功能就是获取本页面的短网址。

这个想法是好的,可是在我付诸于行动的时候,发现这个需要跨域。

起初我的想法就是,跨域的最简单的方法就是增加一个script标签,因为script标签是允许跨域的。

但是问题又来了,对方的API返回的是个json对象,用script标签只能执行,却不能获取到里面的东西,也就是说返回的东西是不可控的。

随后我就想到了jQuery中的getJSON的方法,学习了一下,没想到里面的文章这么大。

jQuery非常聪明,他也意识到只靠script请求是无法接受到返回的东西的,所以他就设计了一个全局的callback函数,发送请求的时候把这个callback函数也传进去。

服务器判断是否有这个callback函数,如果没有就返回一个对象,如果有就返回一个函数名(对象)。

我们可以通过下面这个地址来看一下

http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn

大家可以打开一下,结果返回的是一个json对象。

如果我加上callback参数

http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn&callback=somefunc

大家可以看到返回的是

somefunc({“shorturl”: “http:\/\/to.ly\/3XHP”, “ok”: true})

传入的也正好是函数名。

这个想法很不错,缺点就是对方服务器必须是可控的。

大方向是这个的,但是还有一些细节的小技巧,比如说如何在匿名函数中设置一个全局函数,如何将这个全局函数变为匿名函数!

本来想直接把jQuery中的getJSON拿来直接用的,可是看了才知道,jQuery的ajax方法都混合到一起了,想剥落下来也不是一件容易的事。

庆幸的是我还懂一点JavaScript,经过我的加工与修改,下面的例子已经可以正常使用。详细的可以查看注释。

以下是代码片段:

(function() {
 var cross = {
 //设置一个随机的callback函数..防止跟其他的全局函数重名
 callback : 'cross' + parseInt(Math.random()*1000),
 init : function() {
 this.getJSON('http://to.ly/api.php?json=1&longurl='+encodeURIComponent('http://www.skiyo.cn/'), function(data){
 alert(data.shorturl);
 });
 },
 getJSON : function(url, callback) {
 var c = this.callback;
 url = url + "&callback=" + c;
 // Handle JSONP-style loading
 //将函数名设置为window的一个方法,这样此方法就是全局的了.
 window[ c ] = window[ c ] || function( data ) {
 //调用匿名函数
 callback(data);
 // Garbage collect
 window[ c ] = undefined;
 try {
  delete window[ c ];
 } catch(e) {}
 if ( head ) {
  head.removeChild( script );
 }
 };
 var head = document.getElementsByTagName("head")[0] || document.documentElement;
 var script = document.createElement("script");
 script.src = url;
 // Handle Script loading
 var done = false;
 // Attach handlers for all browsers
 script.onload = script.onreadystatechange = function() {
 if ( !done && (!this.readyState 
  this.readyState === "loaded" || this.readyState === "complete") ) {
  done = true;
  // Handle memory leak in IE
  script.onload = script.onreadystatechange = null;
  if ( head && script.parentNode ) {
  head.removeChild( script );
  }
 }
 };
 head.insertBefore( script, head.firstChild );
 },
 };
 //go
 cross.init();
})();

总结

到此这篇关于jQuery中getJSON跨域原理的文章就介绍到这了,更多相关jQuery getJSON跨域原理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
You might like
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
一些mootools的学习资源
2010/02/07 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python实现爬取并分析电商评论
2020/06/19 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
行政人员工作职责
2013/12/05 职场文书
精彩的英文自荐信
2014/01/30 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
齐云山导游词
2015/02/06 职场文书
团日活动总结格式
2015/05/11 职场文书
标准发言稿结尾
2019/07/18 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers