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


Posted in Javascript onMay 18, 2010

原理:JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
继续学习javascript闭包
Dec 03 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 #Javascript
JS request函数 用来获取url参数
May 17 #Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 #Javascript
JQuery中的ready函数冲突的解决方法
May 17 #Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 #Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 #Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
php xml实例 留言本
2009/03/20 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python解释器spython使用及原理解析
2019/08/24 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
庆元旦广播稿
2014/02/10 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js