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. 如何修改tomcat名称

    修改tomcat名称为  Tomcat-jx-1

  2. python学习笔记(0)python基础概念

    一.字符集 说字符集之前,先说下2进制的故事,计算机比较傻只认识2进制,什么是2进制,就是0,1,计算机只认识这俩数字,其他的都不认识,这样的0或1为一"位",规定8位为一个字节, ...

  3. LeetCode Day 2

    LeetCode0004 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...

  4. Visual Studio通过Cordova支持混合跨平台移动开发

    Microsoft在Visual Studio 2013 Update 2中添加了对混合跨平台移动应用程序的本地支持. Microsoft早在2011年就已经开始了与PhoneGap的合作,那时候是为 ...

  5. 判断两个数组是否相似 (arraysSimilar)

    题目 解答 思路 具体实现代码 总结 题目 题目来自 慕课网 JavaScript 深入浅出 1-6 编程练习 请在 index.html 文件中,编写 arraysSimilar 函数,实现判断传入 ...

  6. 吴裕雄--天生自然HTML学习笔记:HTML <div> 和<span>

    HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来. HTML 区块元素 大多数 HTML 元素被定义 ...

  7. lower_bound()函数使用

    lower_bound()函数需要加头文件#include<algorithm>,其基本用途是查找(返回)有序区间中第一个大于或等于给定值的元素的位置,其中排序规则可以通过二元关系来表示. ...

  8. python js正则表达式

    一.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达 ...

  9. 吴裕雄--天生自然 R语言数据分析:火箭发射的地点、日期/时间和结果分析

    dfS = read.csv("F:\\kaggleDataSet\\spacex-missions\\database.csv") library(dplyr) library( ...

  10. jQuery、js全页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...