目录
-
- JSONP的由来
- JSONP有什么用
- JSONP原理
- 前台代码
- 后台Java代码
- 关键点
- 请求成功
JSONP的由来
根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据。
JSONP有什么用
由于同源从略的限制，XMLHttpRequest只允许请求前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后再服务端输出JSON数据并执行回调函数，从而解决跨域数据请求
JSONP原理
首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
前台代码
HTML和jQuery
代码
.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>gg</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="div1"><h2>AJAX跨域请求</h2></div>
<button id="button" type="button">get</button>
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
$.ajax({
type: "GET",
url: "http://xx.xxx.x.xx:xxxx/xxxx",
data: {xx:"xxx"},
async: false,
dataType:"jsonp",//传入参数格式（jsonp精髓）
jsonp: "callback",//写不写都一样，默认的参数名
beforeSend:function(xhr){
console.log("xhr="+JSON.stringify(xhr));
console.log('发送前');
},
success:function(data,textStatus,jqXHR){
var result = JSON.stringify(data);
console.log('成功');
console.log("data="+result);
console.log("textStatus="+textStatus);
console.log("jqXHR="+JSON.stringify(jqXHR));
$("#text").val(result);
},
error:function(xhr,textStatus){
console.log('错误');
console.log("xhr="+JSON.stringify(xhr));
console.log("textStatus="+textStatus);
},
complete:function(){
console.log('结束');
}
});
});
});
</script>
</html>
后台Java代码
这里只贴出controller部分代码
@GetMapping("")
public String receive(@RequestParam Map<String, Object> queryParam, @RequestParam String callback){
Map<String, Object> result = new HashMap<String, Object>();
List<Map<String, Object>> list = Service.receive(queryParam);
//list=[{tp_name=1, tp_remark=1, is_valid=1, tp_code=1, db_timestamp=2019-01-29 13:56:02}]
JSONArray json = JSONArray.fromObject(list);
String s = json.toString();
//s=[{"tp_name":"1","tp_remark":"1","is_valid":1,"tp_code":"1","db_timestamp":"2019-01-29 13:56:02"}]
String result= callback + "(" + s + ");";
//这步非常关键，必须返回规定的格式，否则就报错textStatus=parseerror
return result;
}
关键点
jsonp默认规定了传入前台的数据格式是
callback(json格式的数据);
当然参数名称callback可以自定义 比如
jsonp: "function"
就定义成function咯
请求成功
json 是一种数据格式，jsonp 是一种数据调用的方式，带callback的json就是jsonp。虽然两者只差一个字母，但是完全是两个不同的东西。
欢迎指正错误
引用 : @假象103