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 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
基于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
数据库的日期格式转换
2006/10/09 PHP
php数组转成json格式的方法
2015/03/09 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
JS修改css样式style浅谈
2013/05/06 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
企业管理培训感言
2014/01/27 职场文书
多媒体教室标语
2014/06/26 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
个人典型事迹材料
2014/12/30 职场文书
企业计划生育责任书
2015/05/09 职场文书
毕业论文致谢范文
2015/05/14 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python