Jsonp 跨域的原理以及Jquery的解决方案


Posted in Javascript onJune 27, 2011

如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
个人理解:
就是在客户端动态注册一个函数function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的function a(data),从而实现了跨域.

<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> 
<html xmlns="http://www.worg/xhtml" > 
<head> 
<title>Test Jsonp</title> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function jsonpCallback(result) 
{ 
$.each(result.items, function(i,item){ 
$("<img/>").attr("src", item.media.m).appendTo("body"); 
if ( i == 3 ) return false; 
}); 
} 
</script> 
</head> 
<body> 
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback"></script> 
</body> 
</html>

jQuery的解决方案:
<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> 
<html xmlns="http://www.worg/xhtml" > 
<head> 
<title>Test Jsonp</title> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) { 
$.each(data.items, function(i, item) { 
$("<img/>").attr("src", item.media.m).appendTo("body"); 
if (i == 3) return false; 
}); 
}); 
}); 
</script> 
</head> 
<body></body> 
</html>

jquery 的jsoncallback是动态生成的,真正请求服务器的地址:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738
Javascript 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 #Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 #Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 #Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 #Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 #Javascript
jquery一般方法介绍 入门参考
Jun 21 #Javascript
jquery操作select option 的代码小结
Jun 21 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python实现xlsx文件分析详解
2018/01/02 Python
Python3 中文文件读写方法
2018/01/23 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python try...finally...的实现方法
2020/11/25 Python
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
意外伤害赔偿协议书
2014/09/16 职场文书
美丽心灵观后感
2015/06/01 职场文书
迎国庆主题班会
2015/08/17 职场文书
合同补充协议书
2016/03/24 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
详解redis在微服务领域的贡献
2021/10/16 Redis
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
使用Redis实现分布式锁的方法
2022/06/16 Redis