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实现全选、全不选以及单选功能
Mar 23 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery操作事件完整实例分析
Jan 10 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将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
心得体会怎么写
2013/12/30 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
公司委托书格式范文
2014/04/04 职场文书
社区服务活动总结
2014/05/07 职场文书
学校花圃的标语
2014/06/18 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js