快捷導(dǎo)航

Spring 4.1+JSONP的使用指南

更新時間：2016年04月26日 08:45:57 作者：風(fēng)間影月

在解釋JSONP之前,我們需要了解下”同源策略“,這對理解跨域有幫助。基于安全的原因,瀏覽器是存在同源策略機(jī)制的,同源策略阻止從一個源加載的文檔或腳本獲取或設(shè)置另一個源加載額文檔的屬性。說的簡單點(diǎn)就是瀏覽器限制腳本只能和同協(xié)議、同域名、同端口的腳本進(jìn)行交互。

JSONP就是為了解決這一問題的,JSONP是英文JSON with Padding的縮寫,是一個非官方的協(xié)議。他允許服務(wù)端生成script tags返回值客戶端,通過javascript callback的形式來實(shí)現(xiàn)站點(diǎn)訪問。JSONP是一種script tag的注入,將server返回的response添加到頁面是實(shí)現(xiàn)特定功能。

簡而言之,JSONP本身不是復(fù)雜的東西,就是通過scirpt標(biāo)簽對javascript文檔的動態(tài)解析繞過了瀏覽器的同源策略。

如今的巨石應(yīng)用已經(jīng)越來越不行了，很多互聯(lián)網(wǎng)在后期都會在用分布式的架構(gòu)

那么在頁面上不同的服務(wù)調(diào)用不同域名下的json是有問題的

（跨域：不同域名，相同域名但是不同端口）

JavaScript規(guī)范中提到的json是不能直接跨域調(diào)用，為了安全，但是能調(diào)用js片段

所以把json包裝為一個js片段，也就是jsonp那么就能夠跨域請求

在spring4.1后，提供了新的方法可以作為jsonp的調(diào)用

例：

@RequestMapping(value="/list")
  @ResponseBody
  public Object getItemCatList(String callback) {
    ItemCatResult result = itemCatService.getItemCatList();
    if (StringUtils.isBlank(callback)) {
      //需要把result轉(zhuǎn)換成字符串
      return result;
    }
    //如果字符串不為空，需要支持jsonp調(diào)用 spring4.1 以上可用
    MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
    mappingJacksonValue.setJsonpFunction(callback);
    return mappingJacksonValue;
  }

如圖，這就是jsonp

那么只要在js需要調(diào)用jsonp的地方稍加處理就能夠跨域調(diào)用數(shù)據(jù)了~

做了個例子，用來在頁面上展示jsonp：

（js寫的丑了點(diǎn)，本人后端出生，前端大俠們輕拍~）

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

展示的效果：