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数组组合成字符串的脚本
Jan 06 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
React组件的三种写法总结
Jan 12 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
小程序云开发之用户注册登录
May 18 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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原创论坛
2006/10/09 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
js实现一个简易计算器
2020/03/30 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
深入理解Python对Json的解析
2017/02/14 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
电工技术比武方案
2014/05/11 职场文书
质检员岗位职责范本
2015/04/07 职场文书
台风停课通知
2015/04/24 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL