Json和Jsonp的区别

作者: vivianXIa | 来源:发表于2019-04-25 10:25 被阅读0次

ajax(2)
JSON与JSONP
json和jsonp的区别：
json和jsonP的区别：
Json和Jsonp的区别
说说JSON和JSONP区别
Ajax的跨域请求
json与jsonp的区别
简述json和jsonp的区别
跨域的几种实现方式

昨天突然自问json和jsonp有啥区别，懵，好像还真的答不出来！然后特意去阅读了很多资料，做做一个总结！

json是一种基于文本的数据交换格式，不支持跨域，格式前端大家都很熟悉,键值对的方式存在。

{"first_name":"4344","last_name":"333"}

通常这样去请求接口，会报错“Origin ****** is not allowed by Access-Control-Allow-Origin.” 的错误，则可能是由于json数据不支持跨域导致的，应考虑使用jsonp协议。当然java后台接口加上允许跨域请求头部也是可以解决这个问题。

 1 $(function () {
 2     var user = {
 3         "username": "HelloWorld"
 4     };
 5 
 6     $.ajax({
 7         url: "http://localhost:8080/Changyou/UserInfo",
 8         type: "POST",
 9         contentType: "application/json; charset=utf-8",
10        dataType: "json",  //json不支持跨域请求,只能使用jsonp
11         data: {
12             user: JSON.stringify(user)
13         },
14         success: function (data) {
15             $("#user_name")[0].innerHTML = data.user_name;
16             $("#user_teleNum")[0].innerHTML = data.user_teleNum;
17             $("#user_ID")[0].innerHTML = data.user_ID;
18         },
19         error: function () {
20             alert("请求超时错误!");
21         }
22     })
23 });

JSONP(JSON with Padding)是一个跨域交互协议，可以理解为，JSONP约定了JSON的这个数据怎样进行传递。

1 $(function () {
 2 
 3     var user = {
 4         "username": "HelloWorld"
 5     };
 6 
 7     $.ajax({
 8         url: "http://localhost:8080/Changyou/UserInfo",
 9         type: "POST",
10         contentType: "application/json; charset=utf-8",
11         dataType: "jsonp",  //json不支持跨域请求,只能使用jsonp
12         data: {
13             user: JSON.stringify(user)
14         },
15         jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
16         jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
17         success: function (data) {
18             $("#user_name")[0].innerHTML = data.user_name;
19             $("#user_teleNum")[0].innerHTML = data.user_teleNum;
20             $("#user_ID")[0].innerHTML = data.user_ID;
21         },
22         error: function () {
23             alert("请求超时错误!");
24         }
25     })
26 });

服务端代码如下

1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2     response.setContentType("application/json; charset=utf-8");
 3     String username = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8");
 4     String callback = new String(request.getParameter("callback").getBytes("ISO-8859-1"),"utf-8");
 5     System.out.println("接收到的数据：" + username);
 6     System.out.println("callback的值：" + callback);
 7     JSONObject user = JSONObject.fromObject(username);
 8     System.out.println("接收到的用户名：" + user.get("username"));
 9     JSONObject userinfo = new JSONObject();
10     userinfo.put("user_name", "张鸣晓");
11     userinfo.put("user_teleNum", "18810011111");
12     userinfo.put("user_ID", "123456789098765432");
13     PrintWriter out = response.getWriter();
14     String backInfo = callback + "(" + userinfo.toString() + ")"; //将json数据封装在callback函数中提供给客户端
15     out.print(backInfo);
16     out.close();
17 }

参考链接