- 浏览: 228209 次
- 性别:
- 来自: 上海
最新评论
什么是JSONP?
先说说JSONP是怎么产生的:
其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
JSONP的客户端具体实现:
JSONP的服务端具体实现:
先说说JSONP是怎么产生的:
其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
JSONP的客户端具体实现:
$.getJSON("http://127.0.0.1/creat/getJsonpCourseDataList?callback=?", function(data){ alert(data[0].name); });
JSONP的服务端具体实现:
@RequestMapping(value="/getJsonpCourseDataList") public void getJsonpCourseDataList(HttpServletRequest req, HttpServletResponse response) { String callback = req.getParameter("callback"); callback = callback == null ? "" : callback; response.setContentType("application/x-javascript"); response.setCharacterEncoding("UTF-8"); response.setHeader("P3P", "CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"); try { PrintWriter out = response.getWriter(); if(StringUtil.isNullOrEmpty(callback)){ out.write(result); }else{ out.write(callback+ "([{ name:'John',age:'19'},{ name:'joe',age:'20'}]);"); } out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } }
发表评论
-
三分钟学会@Autowired@Qualifier@Primary注解
2018-05-20 09:39 0今天主要简单的跟大家介绍一下spring自动装配相关的@A ... -
两分钟学会自动注入@Resource和@Inject注解
2018-05-20 09:25 9212上文系统的介绍了spring自动装配@Autowired注解 ... -
一分钟学会spring注解之@Lazy注解
2018-05-20 09:24 6251今天主要从以下几方面来介绍一下@Lazy注解 @La ... -
一分钟学会spring注解之@Autowired注解(二)
2018-05-20 09:35 5980上一遍文章中有简单的介绍@Autowired注解的使用,没有 ... -
全网最全技术电子书免费发放
2018-05-20 09:19 1273之前整理过一些互联网技术相关的视频资料,大家的反馈都不错,然 ... -
深入理解spring之Aware接口的相关实现
2018-05-20 09:28 1443前面几篇文章简单的介绍了spring中bean注解以及怎么在 ... -
200G免费偷懒必看资料全集(二)
2018-05-05 16:10 1100在上文小编整理过一大波资料分享出来之后,大家的回应说都不错 ... -
250G偷懒必看资料全集
2018-05-05 16:04 1190要想成为一个专业的'偷懒'程序员,没有点偷懒必看资料怎么能 ... -
200G免费偷懒必看资料全集(二)
2018-05-04 22:41 0在上文小编整理过一大波资料分享出来之后,大家的回应说都不错( ... -
深入理解java的反射机制
2018-04-29 19:03 535今天将从以下4方面来系统的学习一下java的反射机制: ... -
深入理解java注解的实现原理
2018-04-29 19:13 694今天将从以下4个方面来系统的学习一下java注解 ... -
深入理解java动态代理的实现机制
2018-04-29 19:10 529今天将从以下5方面来系统的学习一下java动态代理的实现机 ... -
spring boot 过滤器去除请求参数前后空格
2017-09-26 21:54 11192需求:去除用户表单参数中由于用户不小心输 ... -
spring+quartz实现定时任务支持集群
2016-08-08 16:49 705最近项目要做集群,然后找了下资料发现quartz本身就支持集 ... -
spring+aop+自定义注解实现操作日志记录
2016-08-07 11:49 75111,spring配置文件 <bean class= ... -
Nginx1.9+LuaJIT+Kafka的点播监控系统实战
2016-05-21 11:03 1067安装前的准备 Nginx1.9.9LuaJIT-2.0. ... -
post,get请求nginx记录日志kafka自动扫描程序
2016-04-14 16:03 1206kafka的介绍以及使用安装请查看博文ht ... -
springmvc整合dubbo分布式系统的搭建小例子
2016-01-30 12:56 5367四个步骤 1 搭建zookeepe ... -
redis Jedis序列化自定义存储list对象和map数据
2016-01-28 20:07 255241,redis缓存配置类 public class Redis ... -
SpringMVC通过Redis实现缓存主页
2016-01-28 10:48 1733这里说的缓存只是为了提供一些动态的界面没办法作静态化 ...
相关推荐
ajax跨域请求,jquery.jsonp插件
jquery-jsonp插件
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON...
Jsonp和java操作
jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-JSONP 特性: ...
jQuery+JSONP+artDialog 实现虾米音乐的检索、选取和播放
基于ajax方式的跨域请求jsonp的前后台代码
终于找到了一个好用的jquery-jsonp插件,可以完美的支持jsonp请求。可以完美的支持jsonp请求。
主要介绍了jQuery使用jsonp实现百度搜索,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
主要介绍了jQuery中JSONP的两种实现方式详解的相关资料,需要的朋友可以参考下
后台php设置jsonp
NULL 博文链接:https://bijian1013.iteye.com/blog/2179338
一个jquery文件,适合学习参考应用jquery轻量级
jquery下利用jsonp跨域访问实现方法.docx
什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域。跨域,就是在一个域中访问另一个...顾名思义,JSONP是利用JSON作为垫片,从而实现跨域请求的一种技术手段。其基本原理是利用HT
主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下
纯servlet实现JSONP 非常简单易懂的一个例子。