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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript  Error 对象 错误处理
May 18 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
js快速排序的实现代码
Dec 08 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python OS模块实例详解
2019/04/15 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python打开使用的方法
2019/09/30 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
应用数学专业求职信
2014/03/14 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis