jsonp跨域請求

1.什麼是跨域

　　跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。

　　所謂同源是指，域名，協議，端口均相同。

2.什麼是jsonp

　　Jsonp其實就是一個跨域解決方案。Js跨域請求數據是不能夠的，可是js跨域請求js腳本是能夠的。能夠把數據封裝成一個js語句，作一個方法的調用。跨域請求js腳本能夠獲得此腳本。獲得js腳本以後會當即執行。能夠把數據作爲參數傳遞到方法中。就能夠得到數據。從而解決跨域問題。

3.jsonp的原理

　　瀏覽器在js請求中，是容許經過script標籤的src跨域請求，能夠在請求的結果中添加回調方法名，在請求頁面中定義方法，既可獲取到跨域請求的數據。

4.服務端代碼

方式一：本身拼裝返回結果

    @ResponseBody
    public String getItemCatList(String callback) {
         //此處獲取對象信息
        CatResult catResult = itemCatService.getItemCatList();
        //把pojo轉換成json字符串
        String json = JsonUtils.objectToJson(catResult);
        //拼裝返回值//用回調函數名稱包裹返回數據，這樣，返回數據就做爲回調函數的參數傳回去了

        String result = callback + "(" + json + ");";
        return result;
    }

方式二：使用MappingJacksonValue對象拼裝返回結果 

@ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }

5.客戶端代碼

　　5.1基於JavaScript標籤實現調用

　　添加一個<script>標籤，用於發起跨域請求；注意看請求地址後面帶了一個callback=showData的參數；

　　showData便是回調函數名稱，傳到後臺，用於包裹數據。數據返回到前端後，就是showData(result)的形式，由於是script腳本，因此自動調用showData函數，而result就是showData的參數。

　　至此，咱們算是跨域把數據請求回來了，可是比較麻煩，須要本身寫腳本發起請求，而後寫個回調函數處理數據，不是很方便

    <script>
        //回調函數
        function showData (result) {
            var data = JSON.stringify(result); //json對象轉成字符串
            alert(data);
        }

        $(document).ready(function () {//向頭部輸入一個腳本，該腳本發起一個跨域請求
            $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
        });
    </script>

　　5.2基於ajax的jsonp方式實現調用

$.ajax({
    url: "http://localhost:9090/student",
    type: "GET",
    dataType: "jsonp", //指定服務器返回的數據類型
    success: function (data) {
        var result = JSON.stringify(data); //json對象轉成字符串
        alert(result);
    }
});

瞭解更多參考：https://www.cnblogs.com/chiangchou/p/jsonp.html

 

　　

@ResponseBody

     public Object getItemCatList(String callback) {

          CatResult catResult = itemCatService.getItemCatList();

          MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);

          mappingJacksonValue.setJsonpFunction(callback);

          returnmappingJacksonValue;

     }