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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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数组排序函数归纳
2016/08/08 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
python实现挑选出来100以内的质数
2015/03/24 Python
python引用DLL文件的方法
2015/05/11 Python
对python sklearn one-hot编码详解
2018/07/10 Python
代码详解django中数据库设置
2019/01/28 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL