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的实质和区别