Jsonp 跨域的原理以及Jquery的解决方案


Posted in Javascript onMay 18, 2010

原理:JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 #Javascript
JS request函数 用来获取url参数
May 17 #Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 #Javascript
JQuery中的ready函数冲突的解决方法
May 17 #Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 #Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 #Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
给初学PHP的5个入手程序
2006/11/23 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
安全承诺书范文
2014/03/26 职场文书
献爱心倡议书
2014/04/14 职场文书
设计顾问服务计划书
2014/05/04 职场文书
竞聘上岗演讲
2014/05/19 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
管理人员岗位职责
2015/02/14 职场文书
第二次离婚起诉书
2015/05/18 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python