Spring 4.1+JSONP的使用指南

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

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

如今的巨石应用已经越来越不行了,很多互联网在后期都会在用分布式的架构

那么在页面上不同的服务调用不同域名下的json是有问题的

(跨域:不同域名,相同域名但是不同端口)

JavaScript规范中提到的json是不能直接跨域调用,为了安全,但是能调用js片段

所以把json包装为一个js片段,也就是jsonp那么就能够跨域请求

在spring4.1后,提供了新的方法可以作为jsonp的调用

例:

@RequestMapping(value="/list")
  @ResponseBody
  public Object getItemCatList(String callback) {
    ItemCatResult result = itemCatService.getItemCatList();
    if (StringUtils.isBlank(callback)) {
      //需要把result转换成字符串
      return result;
    }
    //如果字符串不为空,需要支持jsonp调用 spring4.1 以上可用
    MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
    mappingJacksonValue.setJsonpFunction(callback);
    return mappingJacksonValue;
  }

如图,这就是jsonp

那么只要在js需要调用jsonp的地方稍加处理就能够跨域调用数据了~

做了个例子,用来在页面上展示jsonp:

(js写的丑了点,本人后端出生,前端大侠们轻拍~)

var Menu = function () {

  return {
    getMenuData: function (json) {
      console.log(json);
      var data = json.data;
      var html = "";
      for (var i = 0 ; i < data.length ; i ++) {
        var url = data[i].u;
        var name = data[i].n;
        var sub = data[i].i;

        html += "";
        html += "<li class='dropdown-submenu'>";
        html += "<a href='" + url + "'>" + name;
        html += "<span class='c-arrow c-toggler'></span>";
        html += "</a>";
        html += "<ul class='dropdown-menu c-pull-right'>";

        for (var j = 0 ; j < sub.length ; j ++) {
          var url = sub[j].u;
          var name = sub[j].n;
          var node = sub[j].i;

          html += "<li class='dropdown-submenu'>";
          html += "<a href='" + url + "'>" + name;
          html += "<span class='c-arrow c-toggler'></span>";
          html += "</a>";

          html += "<ul class='dropdown-menu c-pull-right'>";
          for (var k = 0 ; k < node.length ; k ++) {
//            debugger
            var name = node[k];
            var last = name.split("|");

            html += "<li>";
            html += "<a href='" + last[0] + "'>" + last[1] + "</a>";
            html += "</li>";
          }
          html += "</ul>";
          html += "</li>";
        }

        html += "</ul>";
        html += "</li>";

      }
      $("#itemCatMenu").html(html);
    },

    getJSONP: function (serverUrl, callbackFun) {
      $.ajax({
        type: "get",
        url: serverUrl,
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: callbackFun,
        success: function(json){
//          console.log(json);
        },
        error: function(e){
          if (e.status != "200") {
            console.log(e);
          }
        }
      });
    }
  };

}();

$(document).ready(function()
{
  var serverUrl = "http://localhost:8088/rest/menu/list";
  Menu.getJSONP(serverUrl, "Menu.getMenuData");
});

展示的效果:

时间: 2016-04-25

详解SpringBoot多跨域请求的支持(JSONP)

在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的).下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求. 使用AbstractJsonpResponseBodyAdvice来支持跨域请求

详解java 中Spring jsonp 跨域请求的实例

详解java 中Spring jsonp 跨域请求的实例 jsonp介绍 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSO

详解java中this.getClass()和super.getClass()的实例

详解java中this.getClass()和super.getClass()的实例 前言: 遇到this.getClass()和super.getClass()的返回值感到疑惑,经过探索豁然开朗. getClass()是java中Object类的一个方法,其原型为: public final Class<?> getClass() 返回值为 当前运行时类的Class对象. 所以写了一段代码来说明: getClass()不受this和super影响,而是有当前的运行类决定的. 代码如下: 父类

JavaScript用JSONP跨域请求数据实例详解

前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,

详解Vuejs2.0之异步跨域请求

Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了axios.接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等...) 首先我们来安装Vue-Cli开发模板(这个模板可以快速生成vuejs的运行配置环境,可以使新手快速免除配置搭建出运行界面),这里我使用cnpm命令,请自行百度配置. 打开命令窗口: cnpm install -g vue-cli 等待片刻,即可安装完毕. 然

详解java中spring里的三大拦截器

Filter 新建 TimeFilter @Component public class TimeFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { System.out.println("time filter init"); } @Override public void doFilter(ServletRequest s

JSONP跨域请求实例详解

JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

详解JSP 中Spring工作原理及其作用

详解JSP 中Spring工作原理及其作用 1.springmvc请所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责负责对请求进行真正的处理工作. 2.DispatcherServlet查询一个或多个HandlerMapping,找到处理请求的Controller. 3.DispatcherServlet请请求提交到目标Controller 4.Controller进行业务逻辑处理后,会返回一个ModelAndView 5.Dispathcher查询一个或多个

详解Java中的 枚举与泛型

详解Java中的 枚举与泛型 一:首先从枚举开始说起 枚举类型是JDK5.0的新特征.Sun引进了一个全新的关键字enum来定义一个枚举类.下面就是一个典型枚举类型的定义: public enum Color{ RED,BLUE,BLACK,YELLOW,GREEN } 显然,enum很像特殊的class,实际上enum声明定义的类型就是一个类. 而这些类都是类库中Enum类的子类(Java.lang.Enum).它们继承了这个Enum中的许多有用的方法.我们对代码编译之后发现,编译器将 enu

详解java中接口与抽象类的区别

详解java中接口与抽象类的区别 1.abstract class 在 Java 语言中表示的是一种继承关系,一个类只能使用一次继承关系.但是,一个类却可以实现多个interface. 2.在abstract class 中可以有自己的数据成员,也可以有非abstarct的成员方法,而在interface中,只能够有静态的不能被修改的数据成员(也就是必须是static final的,不过在 interface中一般不定义数据成员),所有的成员方法都是abstract的. 3.abstract c

详解Java中native方法的使用

今天在网上学习时碰到有关于 native修饰符所修饰的方法,上网查了查,觉得很有意思记录一下 1.native简介 简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由非java语言实现,比如C.这个特征并非java所特有,很多其它的编程语言都有这一机制,比如在C++中,你可以用extern "C"告知C++编译器去调用一个C的函数. native是与C++联合开发的时候用的!使用nat