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. @RequestMapping("/getJsonp")
  12. @ResponseBody
  13. public JSONPObject getJsonp(String callbackparam){
  14. Company company=new Company();
  15. company.setAddress("北大青鸟大学城校区");
  16. company.setEmail("123456@qq.com");
  17. company.setName("广州讯动网络可以有限公司");
  18. company .setPhone("12345678912");
  19. return new JSONPObject(callbackparam, company);
  20. }

AJAX端:

    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. $("#but1").click(function(){
    9. $.ajax({
    10. url:'http://127.0.0.1:8080/DevInfoWeb/get',
    11. type: "get",
    12. async: false,
    13. dataType: "jsonp",
    14. jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
    15. jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
    16. success: function(json) {
    17. alert(json);
    18. },
    19. error: function(){alert('Error');}
    20. });
    21. });
    22. $("#but2").click(function(){
    23. $.ajax({
    24. url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',
    25. type: "get",
    26. async: false,
    27. dataType: "jsonp",
    28. jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
    29. jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
    30. success: function(json) {
    31. alert(json);
    32. },
    33. error: function(){alert('Error');}
    34. });
    35. });
    36. });
    37. </script>
    38. </head>
    39. <body>
    40. <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
    41. <button id="but1">按钮1</button> <br/>
    42. <button id="but2">按钮2</button>
    43. </body>
    44. </html>

springmvc 的@ResponseBody 如何使用JSONP?的更多相关文章

  1. 解决SpringMVC的@ResponseBody返回中文乱码

    SpringMVC的@ResponseBody返回中文乱码的原因是SpringMVC默认处理的字符集是ISO-8859-1,在Spring的org.springframework.http.conve ...

  2. [转]SpringMVC使用@ResponseBody时返回json的日期格式、@DatetimeFormat使用注意

    一.SpringMVC使用@ResponseBody时返回json的日期格式 前提了解: @ResponseBody 返回json字符串的核心类是org.springframework.http.co ...

  3. SpringMVC使用@ResponseBody时返回json的日期格式、@DatetimeFormat使用注意

    一.SpringMVC使用@ResponseBody时返回json的日期格式 前提了解: @ResponseBody 返回json字符串的核心类是org.springframework.http.co ...

  4. SpringMVC使用@ResponseBody注解返回中文字符串乱码的问题

    先说一下我的经历,以及解决问题的而过程. 在使用SpringMVC的时候,最开始的时候在配置文件中使用<mvc:annotation-driven />去自动注册DefaultAnnota ...

  5. SpringMVC的@ResponseBody返回JSON,中文乱码问题的解决.

    SpringMVC的@ResponseBody,返回json,如果有中文显示乱码的解决办法. 在SpringMVC的配置文件中 <bean class="org.springframe ...

  6. spring mvc 返回乱码SpringMVC使用@ResponseBody注解返回中文字符串乱码的问题

    原文地址:https://www.cnblogs.com/fzj16888/p/5923232.html 先说一下我的经历,以及解决问题的而过程. 在使用SpringMVC的时候,最开始的时候在配置文 ...

  7. SpringMvc返回@ResponseBody中文乱码

    使用SpringMvc的@ResponseBody返回指定数据的类型做为http体向外输出,在浏览器里返回的内容里有中文,会出现乱码,项目的编码.tomcat编码等都已设置成utf-8,如下返回的是一 ...

  8. springMVC使用@ResponseBody返回json

    json格式:{"totle":22,"rows":"sss"} map格式:{totle=22, rows=sss} 一.springMV ...

  9. springMVC的@ResponseBody、@RequestBody使用需要注意的地方

    springMVC我觉得比struts2好的其中一个原因就是可以使用注解解析json数据,方便快捷.但是,即使如此,还是有需要注意的地方. 1.返回的地方设置@ResponseBody,请求的对象参数 ...

随机推荐

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习:对象 实例(3)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. WWT在中国:一个改变了人类探索宇宙方式的少年梦想

    想象一下,在宇宙中超光速飞行,访问行星.星云.恒星和小行星将是多么美妙的体验.现在,中国的孩子们已经可以坐在屋子里,仰望穹顶,去探索星球之间无穷的奥秘. 在微软研究院.微软亚洲研究院及中国科学院国家天 ...

  3. python使用geopandas和shapely处理shp文件

    一.环境搭建 所需库:geopandas (以及前置库)  doc:http://geopandas.org/ shapely(以及前置库)  doc: 二.数据预处理 1.将shp文件进行切片 2. ...

  4. 1022 D进制的A+B (20 分)

    题目:1022 D进制的A+B (20 分) 思路: 首先根据A.B的取值范围,可知A+B不过2^31,所以转换成进制数时的最长长度为31. 转换成进制的数存进数组,然后反向输出. 要注意和为0的情况 ...

  5. QT "debugger unknow type"问题解决办法

    windows上使用qt编译有两种,一种是vs的编译器,一种是MinGW的. 这种问题主要是发生在选择了MSVC2013编译器的版本,这个版本的qt需要再装一个调试器,而MinGW不用. 解决办法:下 ...

  6. Python---8函数(函数的参数&递归函数)

    一.函数的参数 Python的函数定义非常简单,但灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数和关键字参数,使得函数定义出来的接口,不但能处理复杂的参数,还可以简化调用者的代 ...

  7. MySQL数据类型(DATA Type)与数据恢复与备份方法

    一.数据类型(DATA Type)概述 MySQL支持多种类型的SQL数据类型:数字类型,日期和时间类型,字符串(字符和字节)类型以及空间类型 数据类型描述使用以下约定: M表示整数类型的最大显示宽度 ...

  8. SWUST OJ Euclid's Game(0099)

    Euclid's Game(0099) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1855 Accepted: 589   De ...

  9. 我们为什么不愿意相信AI?

    人工智能--即AI已经变得越来越聪明,甚至能够预测未来.比如警察可以用AI来提前预判出犯罪的时间或地点,医生可以用AI预测病人最有可能心脏病发作或是中风.甚至研究人员还试图为AI添加上更多的想象力,因 ...

  10. Ubuntu14.04下GAMIT10.6的安装

    #安装步骤将ubuntu切换到root用户权限 1 $sudo -s ##安装必要软件 1 2 3 4 5 $ apt-get install gcc $ apt-get install gfortr ...