json和jsonp的区别和联系 springMVC实现jsonp跨域请求
一、 概念理解
1、 json：指的是 JavaScript 对象表示法（JavaScript Object Notation）；JSON 是轻量级的文本数据交换格式 ； JSON 使用 Javascript语法来描述数据对象，但是
JSON 仍然独立于语言和平台。
2、 jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即
跨域读取数据。
二、跨域请求的理解
1、JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。
2、 示例如下： （引用自：
https://www.cnblogs.com/strugglion/p/5929821.html）
3、跨域： 即 协议 、域名、端口 三者必须相同则为同域，三者任意一个不同，则为不同域 。
a. 协议： http 、 https 等。
b. 域名： www.a.com ;
www.b.com ; 等
c. 端口： 8080 ; 80 等。
一个url由 协议+域名+端口组成。 如： http://www.a.com:80 ( 其中80为默认端口，会自动隐藏）
三、 json 和 jsonp 数据格式的区别
1、 json 数据格式：
{
"id":"110",
"name":"json学习"
}
2、jsonp 数据格式：
callback({
"id":"120",
"name":"jsonp学习"
})
3、通过观察数据可以看到，jsonp = callback( json ) 。 callback值，由url中传递到后台参数所决定的，而非固定变量。
四、 jQuery ajax 实现 jsonp 调用
1、 前端代码
a. html 代码
<table border="2" bordercolor="#a0c6e5" style="border-collapse:collapse;"> <tr> <th>id</th> <th>name</th> </tr> <tbody id="tbody"> <tr id="rows"> <td>id</td> <td>name</td> </tr> </tbody> </table>
b. js 代码
<script type="text/javascript">
$(function(){
jsonp();
});
function jsonp(){
$.ajax({
url:'http://192.168.1.253:999/paseJson/cityJson',
type:'get',
data:'',
dataType:'jsonp',
jsonp:"callbackFunc", // 用于设置后台接收 jsonp 回调函数参数名称,默认为 callback .
jsonpCallback:"jsonpDemoss", // jsonp 回调函数名称。（ callbackFunc=jsonpDemoss ） // 默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success:function(data){
eachList(data);
},
error:function(){
alert('请求超时！');
}
});
}
function eachList(data){
for(var x=0;x< data.length; x++){
var _ele1="<tr> <td>"+data[x].id+"</td>";
_ele1+="<td>"+data[x].name+"</td> </tr>";
$("#tbody").append(_ele1);
}
}
</script>
2、后端代码
@RequestMapping(value="/cityJson")
@ResponseBody
public String cityJson(String id,String callbackFunc){
if(StringUtils.isBlank(id)){
id="1";
}
List<Area> provinceList = areaService.getAreaListByParentId(id);
// list 转为 json 格式字符串
String jsonString = JsonMapper.toJsonString(provinceList);
// callbackFunc is not blank , jsonp request
if(StringUtils.isNotBlank(callbackFunc)){
System.out.println(callbackFunc);
// 拼接jsonp 数据格式
jsonString = callbackFunc+"("+jsonString+")";
}
return jsonString;
}
五、 原生 js 实现 jsonp 调用
1. js 代码
<script type="text/javascript">
$(function(){
scriptJsonp();
});
// 原生js 实现 jsonp
function scriptJsonp(){
// a、 定义请求url
var url="http://192.168.1.253:999/paseJson/cityJson?callbackFunc=callFunction";
// b、创建 script 标签
var scriptTag=document.createElement('script');
scriptTag.setAttribute('src',url);
// c、 添加 script 标签到 html 文档中
document.getElementsByTagName('body')[0].appendChild(scriptTag);
}
//d、 执行回调函数
function callFunction(data){
for(var x=0;x< data.length; x++){
var _ele1="<tr> <td>"+data[x].id+"</td>";
_ele1+="<td>"+data[x].name+"</td> </tr>";
$("#tbody").append(_ele1);
}
}
</script>
2. html 代码 和 后台代码同 四-2 。
六、 总结
1、 json 是一种数据交换格式，独立于语言和平台。 c，php，java 都支持json ； 移动端，web端都可以使用json用于数据交换。
2、 jsonp 是一种非官方的跨域数据交互方法。 jsonp的核心是动态添加script标签调用服务器提供的js脚本 。
参考资料：
json和jsonp和ajax的实质和区别