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 31 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jQuery中extend函数详解
Feb 13 Javascript
require.js的用法详解
Oct 20 Javascript
js实现二级导航功能
Mar 03 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
一文了解Vue中的nextTick
May 06 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 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扩展图文教程
2008/12/12 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python使用循环实现批量创建文件夹示例
2014/03/25 Python
对python中的logger模块全面讲解
2018/04/28 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python简单验证码识别的实现方法
2019/05/10 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
中国梦口号
2014/06/13 职场文书
事业单位个人总结
2015/02/12 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
css弧边选项卡的项目实践
2023/05/07 HTML / CSS