Spring 4.1+JSONP的使用指南

2019-11-26 14:25:27

字體：大中小

來源：轉載

供稿：網友

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");});

展示的效果：