springmvc 的@ResponseBody 如何使用JSONP？

Posted Mr.lang?

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springmvc 的@ResponseBody 如何使用JSONP？相关的知识，希望对你有一定的参考价值。

JSONP解释

在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性。有点绕,说的简单点就是浏览器限制脚本只能和同协议、同域名、同端口的脚本进行交互。

JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议。他允许服务端生成script tags返回值客户端,通过javascript callback的形式来实现站点访问。JSONP是一种script tag的注入,将server返回的response添加到页面是实现特定功能。

简而言之,JSONP本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。

JSONP原理及实现

接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语

法的方式,生成一个function

2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的

回调函数里(动态执行回调函数)。

这种动态解析js文档和eval函数是类似的。

 

经过一番努力，解决如下：

SpringMVC端：

 
  1.  @RequestMapping("/get")  
  2.  public void get(HttpServletRequest req,HttpServletResponse res) {  
  3.      res.setContentType("text/plain");  
  4.      String callbackFunName =req.getParameter("callbackparam");//得到js函数名称  
  5.      try {  
  6.          res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据  
  7.      } catch (IOException e) {  
  8.          e.printStackTrace();  
  9.      }  
  10.  }  
  11.    
  12.  @RequestMapping("/getJsonp")  
  13.  @ResponseBody  
  14.  public JSONPObject getJsonp(String callbackparam){  
  15. Company company=new Company();  
  16. company.setAddress("北大青鸟大学城校区");  
  17. company.setEmail("[email protected]");  
  18. company.setName("广州讯动网络可以有限公司");  
  19. company .setPhone("12345678912");  
  20.   return new JSONPObject(callbackparam, company);   
  21.  }  


AJAX端：

[html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta charset="utf-8">  
    5.     <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>  
    6. <script>  
    7. $(document).ready(function(){  
    8.       
    9.       
    10. $("#but1").click(function(){  
    11.      $.ajax({  
    12.         url:‘http://127.0.0.1:8080/DevInfoWeb/get‘,  
    13.         type: "get",  
    14.         async: false,  
    15.         dataType: "jsonp",  
    16.         jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数   
    17.         jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来   
    18.         success: function(json) {  
    19.          alert(json);  
    20.         },  
    21.         error: function(){alert(‘Error‘);}  
    22. });  
    23. });  
    24.   
    25.   
    26. $("#but2").click(function(){  
    27.      $.ajax({  
    28.         url:‘http://127.0.0.1:8080/DevInfoWeb/getJsonp‘,  
    29.         type: "get",  
    30.         async: false,  
    31.         dataType: "jsonp",  
    32.         jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数   
    33.         jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来   
    34.         success: function(json) {  
    35.          alert(json);  
    36.         },  
    37.         error: function(){alert(‘Error‘);}  
    38. });  
    39. });  
    40.   
    41.   
    42. });  
    43. </script>  
    44. </head>  
    45. <body>  
    46.   
    47. <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>  
    48. <button id="but1">按钮1</button> <br/>  
    49. <button id="but2">按钮2</button>  
    50.   
    51. </body>  
    52. </html> 


以上是关于springmvc 的@ResponseBody 如何使用JSONP？的主要内容，如果未能解决你的问题，请参考以下文章

powerbi点击文字跳转界面

powerbi详细数据只显示十行

powerbi切片器细分变大

powerbi设置显示所有数据标签,但数据显示不完整

@responsebody一般在啥情况下使用，他的好处与坏处？

powerbi桌面版处理数据流程是