Spring 4.1+JSONP的應用指南

Spring 4.1+JSONP的應用指南。本站提示廣大學習愛好者：（Spring 4.1+JSONP的應用指南）文章只能為提供參考，不一定能成為您想要的結果。以下是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");
});

展現的後果：