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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
用js简单提供增删改查接口
May 12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vant自定义二级菜单操作
Nov 02 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
How TDD works
2012/09/30 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL