SSM(六)跨域傳輸

時間 2019-11-06

標籤 ssm 傳輸简体版

原文原文鏈接

前言

不知你們在平時的開發過程當中有沒有遇到過跨域訪問資源的問題，我不巧在上週就碰到一個這樣的問題，幸運的是在公司前端同窗的幫忙下解決了該問題。javascript

什麼是跨域問題？

只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域
只要是在不一樣域中是沒法進行通訊的。

基於以上的的出發點，咱們又有跨域共享資源的需求(譬如如今流行的先後端分離以後分別部署的狀況)，本文所採用的解決辦法是JSONP，說到JSONP就會首先想到JSON。雖然只有一字之差但意義卻徹底不同，首先科普一下JSON。html

JSON

其實如今JSON已是至關流行了，只要涉及到先後端的數據交互大都都是採用的JSON(不論是web仍是android和IOS)，因此我這裏就舉一個例子，就算是沒有用過的同窗也能很快明白其中的意思。前端

PostMan

首先給你們安利一款後端開發的利器PostMan,能夠用於模擬幾乎全部的HTTP請求，在開發階段調試後端接口很是有用。這是一個Chrome插件，能夠直接在google商店搜索直接下載(固然前提你懂得)。以後界面就以下：。界面很是簡潔，有點開發經驗的童鞋應該都會使用，不太會用的直接google下就能夠了比較簡單。接着咱們就能夠利用PostMan來發起一次請求獲取JSON了。這裏以我SSM項目爲例,也正好有暴露一個JSON的接口。地址以下: http://www.crossoverjie.top/SSM/content_load。直接在POSTMAN中的地址欄輸入該地址，採用GET的方式請求，以後所返回的就是JSON格式的字符串。因爲Javascript原生的就支持JSON，因此解析起來很是方便。java

JSONP

好了，終於能夠談談JSONP了。以前說道JSONP是用來解決跨域問題的，那麼他是如何解決的呢。通過咱們開發界的前輩們發現，HTML中擁有SRC屬性的標籤都不受跨域的影響，好比：<script>、<img>、<iframe>標籤。因爲JS原生支持JSON的解析，因而咱們採用<script>的方式來處理跨域解析，代碼以下一看就明白。 web端:android

<html lang="zh">
<head>
    <script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type: "get",
                async: false,
                url: "http://www.crossoverjie.top/SSM/jsonpInfo?callback=getUser&userId=3",
                dataType: "jsonp",
                jsonp: "callback",//通常默認爲:callback
                jsonpCallback:"getUser",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
                success: function(json){
                    /**
                     * 得到服務器返回的信息。
                     * 能夠作具體的業務處理。
                     */
                    alert('用戶信息：ID： ' + json.userId + ' ，姓名： ' + json.username + '。');
                },
                error: function(){
                    alert('fail');
                }
            });
        });
    </script>

</head>

<body oncontextmenu="return false">

</body>

</html>

其中咱們採用了JQuery給我封裝好的函數，這樣就能夠自動幫咱們解析了。首先咱們來看下代碼中的http://www.crossoverjie.top/SSM/jsonpInfo?callback=getUser&userId=3這個地址返回的是什麼內容，仍是放到POSTMAN中執行以下：。能夠看到咱們所傳遞的callback參數帶着查詢的數據又原封不動的返回給咱們了，這樣的話即便咱們不使用JQuery給我封裝好的函數，咱們自定義一個和callback名稱同樣的函數同樣是能夠解析其中的數據的，只是Jquery幫咱們作了而已。git

前端沒問題了，那麼後端又是如何實現的呢？也很簡單，以下：github

@RequestMapping(value = "/jsonpInfo",method = { RequestMethod.GET })
    @ResponseBody
    public Object jsonpInfo(String callback,Integer userId) throws IOException {
        User user = userService.getUserById(userId);
        JSONPObject jsonpObject = new JSONPObject(callback,user) ;
        return jsonpObject ;
    }

後端採用了jackson中的JSONPObject這個類的一個構造方法，只須要將callback字段和須要轉成JSON字符串的對象放進去便可。須要主要的是須要使用@ResponseBody註解才能成功返回。web