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/st… 。假定iFat3的st_no是3，当浏览器经由过程URL通报iFat3的st_id，也就是抓取http://tools.42du.cn/jsonp/st…，获得：
{"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"
});
})