利用Jsonp实现跨域请求,spring MVC+JQuery
1 什么是Jsonp?
JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。
由于同源策略,一般来说位于www.42du.cn的网页无法与不是 www.42du.cn的服务器沟通,而HTML的 < script >元素是一个例外。利用 < script >元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。
2 Jsonp基本原理
为了理解这种模式的原理,先想像有一个回传JSON文件的URL,而JavaScript 程序可以用XMLHttpRequest跟这个URL要数据。假设我们的URL是 http://tools.42du.cn/jsonp/student/3 。假设iFat3的st_no是3,当浏览器通过URL传递iFat3的st_id,也就是抓取http://tools.42du.cn/jsonp/student/3,得到:
{"st_no":3,"st_name":"iFat3","st_desc":"iFat3是学校的超级学渣"}
这个JSON数据可能是依据传过去URL的查询参数动态产生的。
这个时候,把 < script >元素的src属性设成一个回传JSON的URL是可以想像的,这也代表从HTML页面通过script元素抓取 JSON是可能的。
然而,一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在 < script >元素运行,从src里URL 回传的必须是可运行的JavaScript。在JSONP的使用模式里,该URL回传的是由函数调用包起来的动态生成JSON,这就是JSONP的“填充(padding)”或是“前辍(prefix)”的由来。
惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部分,例如:
<script type="text/javascript"
src="http://tools.42du.cn/jsonp/student/3?callback=callback>
</script>
服务器会在传给浏览器前将JSON数据填充到回调函数(callback)中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。在本例中,浏览器得到的是:
/**/callback({"st_no":3,"st_name":"iFat3","st_desc":"iFat3是学校的超级学渣"});
3 服务端生成Jsonp
本例中的Jsonp利用的是Spring Framework的JSonp处理部分生成,详细内容请阅读官方文档。链接见相关资料中的spring部分,本人强烈建意您在实际开发过程中,先阅读官方文档,再进行代码编写。
3.1 模型(model)对象
Student模型对象的get和set方法未列出。
public class Student extends BaseBean implements Serializable {
private Integer st_no;
private String st_name;
private String st_desc;
}
3.2 spring的Jsonp处理
@ControllerAdvice
@RequestMapping("/jsonp")
public class StudentJsonpAdvice extends AbstractJsonpResponseBodyAdvice {
private List<Student> students = new ArrayList<Student>();
public StudentJsonpAdvice() {
super("callback");
initData();
}
@RequestMapping(value="/student/all",method= RequestMethod.GET)
@ResponseBody
public List<Student> list(){
return students;
}
@RequestMapping(value="/student/{st_no}",method= RequestMethod.GET)
@ResponseBody
public Student info(@PathVariable Integer st_no){
if(st_no != null) {
if(st_no > 0 && st_no <4) {
return students.get(st_no -1);
}
return students.get(0);
}
return null;
}
private void initData() {
Student st1 = new Student(1,"王美丽","王美丽是学校的校花");
Student st2 = new Student(2,"毛三胖","毛三胖是学校的学霸");
Student st3= new Student(3,"iFat3","iFat3是学校的超级学渣");
students.add(st1);
students.add(st2);
students.add(st3);
}
}
4 客户端取得Jsonp数据
利用JQuery的ajax方法取得所有学生的数据,并利用回调函数(callback)将数据插入到页面中。更多JQuery的ajax方法参见相关资料中的JQuery部分。
function callback(data) {
$(data).each(function(i,item){
$("#stu_ul").append("<li>"+item.st_name+"</li>");
});
}
$(document).ready(function () {
$.ajax({
type:"get",
dataType:"jsonp",
url:"http://tools.42du.cn/jsonp/student/all",
jsonpCallback:"callback"
});
})
5 相关资料
利用Jsonp实现跨域请求,spring MVC+JQuery的更多相关文章
- 利用JSONP实现跨域请求
前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...
- 关于使用Jsonp做跨域请求
今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 使用jsonp进行跨域请求
使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
- mvc中使用jsonp进行跨域请求详细说明
在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- 使用Jsonp实现跨域请求
来自百度百科的一段话: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.exampl ...
- jsonp原理,跨域请求头处理
一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...
- CORS和jsonp实现跨域请求
同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...
- 利用CORS实现跨域请求(转载)
跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性--CORS(Cross-Origin Resource Sh ...
随机推荐
- css3图片动画旋转
body{ background-color:#021E36; text-align: center; } .container{margin:500px auto;} .round{position ...
- iOS学习之Map,定位,标记位置的使用
iOS上使用地图比Android要方便,只需要新建一个MKMapView,addSubView即可.这次要实现的效果如下: 有标注(大头针),定位,地图. 1.添加地图 1.1 新一个Single V ...
- alert一般用来调试客户端的javascript代码,以及更好的调试方法
alert一般用来调试客户端的javascript代码 调试利器--console.log 如今主流浏览器(Chrome,IE8及后续版本,FireFox,Opera等)都支持控制台功能. Chrom ...
- linux 从softnet_stat查看内核丢包信息
1.从系统整体来考虑,通过netstat 查看: [root@localhost net]# netstat -s |grep drop 3168 outgoing packets dropped 1 ...
- 深入理解final关键字以及一些建议
引子:一说到final关键字,相信大家都会立刻想起一些基本的作用,那么我们先稍微用寥寥数行来回顾一下. 一.final关键字的含义 final是Java中的一个保留关键字,它可以标记在成员变量.方法. ...
- 智能机器人chatbot论文集合
机器不学习 jqbxx.com-专注机器学习,深度学习,自然语言处理,大数据,个性化推荐,搜索算法,知识图谱 今年开始接触chatbot,跟着各种专栏学习了一段时间,也读了一些论文,在这里汇总一下.感 ...
- asp.net core 部署到服务器之后外网访问不了
部署发现问题 今天在部署.net core的时候,发现访问http://localhost:xxxx可以,但是用外网访问并不行! 开始尝试解决问题 一开始以为是nginx的问题.各种折腾,各种改配置文 ...
- Linux使用top与free命令查看CPU与内存使用情况
top命令: 显示内容解释: 第一行top分别为:当前时间:系统运行天数:使用者个数:系统负载的平均值,后面的三个值分别为1分钟前.5分钟前.15分钟前进程的平均数,这个数值超过 CPU 数目时,说明 ...
- 用CSS写气泡
新学到的一个小效果 用CSS实现如下图效果,其中demo结构为:<div id="square"></div> 实现这个效果需要用到两个知识点: 1.用bo ...
- diff和patch命令(1)
1. diff是对两个集合的差运算,patch是对两个集合的和运算. 2. diff以逐行的方式,比较文本文件的异同处.所是指定要比较目录,则diff会比较目录中相同文件名的文件,但不会比较其中子目录 ...