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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现手风琴案例
May 04 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常用图片处理类
2016/03/16 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
django中的ajax组件教程详解
2018/10/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
浅析js封装和作用域
2013/07/09 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
电子商务专业学生的自我鉴定
2013/11/28 职场文书
给民警的表扬信
2014/01/08 职场文书
优秀教师事迹简介
2014/02/02 职场文书
消防安全宣传口号
2014/06/10 职场文书
奖励申请报告范文
2015/05/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
django 认证类配置实现
2021/11/11 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫