Ajax+Spring MVC實現跨域請求（JSONP）

時間 2019-11-11

標籤 ajax+spring ajax spring mvc 實現請求 jsonp 欄目 Ajax 简体版

原文原文鏈接

背景：

AJAX向後臺（springmvc）發送請求，報錯：已阻止交叉源請求：同源策略不容許讀取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的遠程資源。可

以將資源移動到相同的域名上或者啓用 CORS 來解決這個問題。

百度一下，發現是遇到了跨域請求請求問題。蒐集資料以下javascript

JSONP解釋

在解釋JSONP以前,咱們須要瞭解下」同源策略「這個概念,這對理解跨域有幫助。基於安全的緣由,瀏覽器是存在同源策略機制的,同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載額文檔的屬性。有點繞,說的簡單點就是瀏覽器限制腳本只能和同協議、同域名、同端口的腳本進行交互。html

JSONP就是爲了解決這一問題的,JSONP是英文JSON with Padding的縮寫,是一個非官方的協議。他容許服務端生成script tags返回值客戶端,經過javascript callback的形式來實現站點訪問。JSONP是一種script tag的注入,將server返回的response添加到頁面是實現特定功能。前端

簡而言之,JSONP自己不是複雜的東西,就是經過scirpt標籤對javascript文檔的動態解析繞過了瀏覽器的同源策略。java

JSONP原理及實現

接下來,來實際模擬一個跨域請求的解決方案。後端爲Spring MVC架構的,前端則經過Ajax進行跨域訪問。jquery

一、首先客戶端須要註冊一個callback(服務端經過該callback(jsonp)能夠獲得js函數名(jsonpCallback))，而後以JavaScript語ajax

法的方式,生成一個functionspring

二、接下來,將JSON數據直接以入參的方式,放置到function中,這樣就生成了一段js語法文檔,返回給客戶端。json

三、最後客戶端瀏覽器動態的解析script標籤,並執行返回的JavaScript語法文檔片斷,此時數據做爲參數傳入到了預先定義好的後端

回調函數裏(動態執行回調函數)。跨域

這種動態解析js文檔和eval函數是相似的。

通過一番努力，解決以下：

SpringMVC端：

@RequestMapping("/get")  
     public void get(HttpServletRequest req,HttpServletResponse res) {  
         res.setContentType("text/plain");  
         String callbackFunName =req.getParameter("callbackparam");//獲得js函數名稱  
         try {  
             res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp數據  
         } catch (IOException e) {  
             e.printStackTrace();  
         }  
     }  
       
     @RequestMapping("/getJsonp")  
     @ResponseBody  
     public JSONPObject getJsonp(String callbackparam){  
        Company company=new Company();  
        company.setAddress("廣州天河華景軟件園");  
        company.setEmail("123456@qq.com");  
        company.setName("廣州訊動網絡能夠有限公司");  
        company .setPhone("12345678912");  
        return new JSONPObject(callbackparam, company);   
     }

AJAX端：

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>  
    <script>  
    $(document).ready(function(){  
          
          
    $("#but1").click(function(){  
         $.ajax({  
            url:'http://127.0.0.1:8080/DevInfoWeb/get',  
            type: "get",  
            async: false,  
            dataType: "jsonp",  
            jsonp: "callbackparam", //服務端用於接收callback調用的function名的參數   
            jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一塊兒傳遞回來   
            success: function(json) {  
             alert(json);  
            },  
            error: function(){alert('Error');}  
    });  
    });  
      
      
    $("#but2").click(function(){  
         $.ajax({  
            url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',  
            type: "get",  
            async: false,  
            dataType: "jsonp",  
            jsonp: "callbackparam", //服務端用於接收callback調用的function名的參數   
            jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一塊兒傳遞回來   
            success: function(json) {  
             alert(json);  
            },  
            error: function(){alert('Error');}  
    });  
    });  
      
      
    });  
    </script>  
    </head>  
    <body>  
      
    <div id="div1"><h2>使用 jQuery AJAX 來改變文本</h2></div>  
    <button id="but1">按鈕1</button> <br/>  
    <button id="but2">按鈕2</button>  
      
    </body>  
    </html>