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 相关资料

Spring处理Jsonp文档

JQuery Ajax官方文档

维基Jsonp条目

菜鸟Jsonp教程

JSON中文介绍

学生列表Jsonp地址

学生信息Jsonp地址

利用Jsonp实现跨域请求,spring MVC+JQuery的更多相关文章

  1. 利用JSONP实现跨域请求

    前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...

  2. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  4. mvc中使用jsonp进行跨域请求详细说明

    在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...

  5. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  6. 使用Jsonp实现跨域请求

    来自百度百科的一段话: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.exampl ...

  7. jsonp原理,跨域请求头处理

    一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...

  8. CORS和jsonp实现跨域请求

    同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...

  9. 利用CORS实现跨域请求(转载)

    跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性--CORS(Cross-Origin Resource Sh ...

随机推荐

  1. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  2. java.lang.IllegalArgumentException: Document base D:\Project\workspace\space\.metadata\.plugins\org.eclipse.wst.server.core\tmp7\wtpwebapps\Blog

    java.lang.IllegalArgumentException: Document base D:\Project\workspace\space\.metadata\.plugins\org. ...

  3. C# WinForm调用UnityWebPlayer Control控件 <学习笔记1>

    工具 1.三维场景 Unity 5.0.2f1 2.开发环境Microsoft Visual Studio 2010 3.需要使用的控件 UnityWebPlayer Control 出现的问题及解决 ...

  4. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

  5. Python爬虫进阶(Scrapy框架爬虫)

    准备工作:           配置环境问题什么的我昨天已经写了,那么今天直接安装三个库                        首先第一步:                           ...

  6. IEEE754 处理数据变换

    public  class IEEE754 { /// <summary> /// 将二进制值转ASCII格式十六进制字符串 /// </summary> /// <pa ...

  7. Css3中的 calc()使用

    http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

  8. Jmeter3.1 使用技巧

    一.JMeter官网 下载地址 http://jmeter.apache.org/download_jmeter.cgi Jmeter wiki https://wiki.apache.org/jme ...

  9. SAP进度条

     一.代码示例: ),"行数 ll_tabix(),"循环标号 ll_pecnt DECIMALS ,"百分比 ll_pecet(),"百分数 ll_text( ...

  10. CentOS7安装WDCP3

    CentOS7安装WDCP3.2面板教程 到此WDCP安装完毕