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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
python中私有函数调用方法解密
2016/04/29 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python中的元组介绍
2019/01/28 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python 下划线的不同用法
2020/10/24 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
领导干部群众路线剖析材料
2014/10/09 职场文书
爱心募捐通知范文
2015/04/27 职场文书
居委会工作总结2015
2015/05/18 职场文书
贷款收入证明格式
2015/06/24 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS