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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
详解JS浏览器事件循环机制
Mar 27 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
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
python操作redis的方法
2015/07/07 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python绘制简单折线图代码示例
2017/12/19 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
Hibernate持久层技术
2013/12/16 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
客服部工作职责范本
2014/02/14 职场文书
大学生军训感想
2014/02/16 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书