jQuery中getJSON跨域原理详解
jQuery中getJSON跨域原理详解
前几天我再开发一个叫 河蟹工具条 的时候,其中有个功能就是获取本页面的短网址。
这个想法是好的,可是在我付诸于行动的时候,发现这个需要跨域。
起初我的想法就是,跨域的最简单的方法就是增加一个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();
})();
转载于:https://www.cnblogs.com/grefr/p/5046342.html
jQuery中getJSON跨域原理详解相关推荐
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
- 跨域问题详解——九种解决跨域方法
跨域是前端再常见不过的问题了,下面主要针对跨域做一次总结,一次理清楚. 一.jsonp解决跨域 jsonp解决跨域问题的原理是:script不受同源策略的影响. //前端代码: <!DOCTYP ...
- 跨域问题详解及解决方案
文章目录 一.前言: 二.什么是跨域问题? 三. 为什么会出现跨域问题? 四.什么情况下会出现跨域? 五.如何解决跨域问题? 5.1 使用@CrossOrigin注解 5.2 使用WebMvcConf ...
- SpringBoot—CORS跨域问题详解和解决方案
关注微信公众号:CodingTechWork,一起学习进步. 引言 在前后端开发过程中,遇到过一种错误,类似于报错: Access to XMLHttpRequest at 'http://127 ...
- 浏览器跨域问题(详解)
一.开发环境的跨域 浏览器请求前端开发服务器,请求css.js,前端开发服务器会返回一个页面,浏览器会渲染页面,请求到的js里面会有一个ajax请求,这个请求的是另外一个服务器. 一般来 ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- 深和jsonp【转】 jsonpk跨域问题详解
取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...
- web开发的跨域问题详解
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表 做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候, ...
最新文章
- 第三次学JAVA再学不好就吃翔(part71)--BigDecimal类
- 安卓获取imei权限闪退_Android10 下获取序列号和IMEI号的权限
- Android recyclerView/listview的点击变色、点击换背景颜色
- 安卓+4.0.4+java模拟器_Android 4.0.4模拟器安装完全教程(图文)
- django 1.8 官方文档翻译: 3-1-1 URL调度器
- Spring配置文件总结
- 学习WPF: 创建数据绑定目录树
- Android混淆注意事项
- 服务器宽带估算及选择
- 街头篮球手游服务器维护,街头篮球手游2017.6.22维护更新公告 宝箱位置调整更新一览...
- 生死看淡,不服就干,小米终于迎来了久违的大幅反弹
- Android隐藏录屏内容,原来手机内置的录屏功能这么强大,好多人都不会用,很可惜!...
- 美团饿了么外卖CPS联盟小程序(新增H5端)花小猪,滴滴大车,一键获取Path
- 如何安装成英文版本的vmware
- [Summary]召集会议
- 华为服务器pe下安装linux,华为服务器安装操作系统.docx
- java 制作炸弹人
- EfficientNet(ICML 2019)原理与代码解析
- Android开发学习心得体会
- 网吧会员计费管理系统-javaweb
热门文章
- 可突破任意ARP防火墙,以限制流量为目标的简单网络管理软件
- Go基础编程:作用域
- 100天59万行代码_如何抽出100天的代码时间
- 海思涵科技WIFI认证服务器不在线,在海思平台外加一个usb wifi模块,mt7601 加载ok,配置网络ok,但不能ping通?...
- java培训机构如何选择适合自己的
- UI设计培训分享:设计当中的颜色运用
- Python培训:try-except语句与else子句联合使用处理可能出现的程序异常
- LightTools( 32-64) 8.4.0下载与安装方法,lighttools免费版,lighttools(光学建模软件)【亲测有效】
- 实例规格 ECS (共享计算型)和 (通用型-原独享)性能上有什么区别?...
- [异常笔记] spring boot 启动-2018040201