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 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
详谈for循环里面的break和continue语句
Jul 20 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
python基本语法练习实例
2017/09/19 Python
python多线程http压力测试脚本
2019/06/25 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
解决python运行启动报错问题
2020/06/01 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
团队精神的演讲稿
2014/05/14 职场文书
产品包装策划方案
2014/05/18 职场文书
艾滋病宣传标语
2014/06/25 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书