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实现定时刷新功能代码
May 09 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现图片切换效果
Oct 19 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python 产生token及token验证的方法
2018/12/26 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python基于win32api实现键盘输入
2020/12/09 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
人事任命书格式
2014/06/05 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
起诉意见书范文
2015/05/19 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
在Python 中将类对象序列化为JSON
2022/04/06 Python