json和jsonp的区别和联系 springMVC实现jsonp跨域请求

爱被打了一巴掌 2022-05-29 22:01 189阅读 0赞

一、 概念理解

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][https_www.cnblogs.com_strugglion_p_5929821.html]）

![20180227171316390][]

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 代码

b. js 代码

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 代码

2. html 代码 和 后台代码同 四-2 。

六、 总结

1、 json 是一种数据交换格式，独立于语言和平台。 c，php，java 都支持json ； 移动端，web端都可以使用json用于数据交换。

2、 jsonp 是一种非官方的跨域数据交互方法。 jsonp的核心是动态添加script标签调用服务器提供的js脚本 。

参考资料： [**json和jsonp和ajax的实质和区别**][json_jsonp_ajax]

[**json和jsonp的使用区别**][json_jsonp]

[**如何解决ajax跨域问题**][ajax]

[https_www.cnblogs.com_strugglion_p_5929821.html]: https://www.cnblogs.com/strugglion/p/5929821.html
[20180227171316390]: /images/20220530/18d71f8bc686483eaa44011592d711b8.png
[json_jsonp_ajax]: http://www.cnblogs.com/xiaoxie2016/p/6293781.html
[json_jsonp]: http://www.cnblogs.com/strugglion/p/5929821.html
[ajax]: http://www.cnblogs.com/sunxucool/p/3433992.html