Ajax跨域（jsonp） 調用JAVA後臺

1. JSONP定義
    JSONP是英文JSON with Padding的縮寫，是一個非官方的協議。它允許在服務器端生成script tags返回至客戶端，通過javascript callback的形式來實現站點訪問。 JSONP是一種script tag的注入，將server返回的response添加到頁面實現特定功能。

2.JSONP由來

    要解釋JSONP的來由，先要說一下瀏覽器的“同源策略(SOP:Same Origin Policy)”。 簡而言之，就是瀏覽器限制腳本程序只能和同協議、同域名、同端口的腳本進行交互，這包括共享和傳遞變量等。cookie的傳遞也是遵從同樣策略。這就造成一些涉及到多個服務器的應用在整合時一些麻煩。跨域訪問的問題造成A站點的Ajax代碼無法訪問B站點的數據。

     如何解決跨域訪問呢？那就要藉助瀏覽器的一個特性：儘管瀏覽器不允許頁面中的腳本程序跨域讀取數據，但卻允許HTML引用跨域的資源，如圖片，CSS和腳本程序。對於腳本程序的引用比較特殊，它被瀏覽器解析以後，就和本地的腳本程序別無二致且可立即進行解釋並執行。如在B站點的一個js文件，一個簡單的提示框：alert（“This is Victor！”）;。在A站點引用這個js，這個腳本就會在B站點的應用中執行，顯示一個alert信息。由於站外腳本的引用是通過script tag來實現的，而腳本程序又可通過DOM的方式可以對HTML頁面的所有標籤進行控制（包括動態的創建script標籤），這就可以實現通過調用站外程序對本地資源進行更改了。另外，通過<script> 標記的使用，就可從服務端直接返回可執行的JavaScript函數調用或者JSON數據。

 

3. JSONP原理與實現
    首先在客戶端註冊一個callback, 然後把callback的名字傳給服務器。此時，服務器先生成 JSON數據。然後以JavaScript 語法的方式，生成一個function, function名字就是傳遞上來的參數jsonp.  

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

    最後，在客戶端瀏覽器中解析script標籤，並執行返回的JavaScript文檔，此時數據作爲參數，傳入到了客戶端預先定義好的回調函數裏(動態執行回調函數) 。

具體代碼操作：

1，js代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$.ajax({     url: 'http://192.168.3.49:8080/PORTAL/authCode',     type: 'post',     dataType:'jsonp',     jsonp: "callback",     data: {         "type":'0',         "mobilePhone": $("#tel").val()     },     success:function(data){         alert(data.ret)         settime(obj);     },     error:function(data){         $('#mstr_ck').html("獲取驗證碼失敗，請重試！");         $("#error_ck").show();     } });

2，java代碼　　

1 2 3 4 5 6 7 8 9

@RequestMapping(value = "authCode") @ResponseBody public String getMobileAuthCode( HttpServletRequest request, String callback)         throws Exception {     String result =  "{'ret':'true'}";     //加上返回參數     result=callback+"("+result+")";    return result; }

json格式：

{
    "message":"獲取成功",
    "state":"1",
    "result":{"name":"工作組1","id":1,"description":"11"}
}

jsonp格式：

callback({
    "message":"獲取成功",
    "state":"1",
    "result":{"name":"工作組1","id":1,"description":"11"}
})

看出來區別了吧，在url中callback傳到後臺的參數是神馬callback就是神馬，jsonp比json外面有多了一層，callback()。這樣就知道怎麼處理它了。於是修改後臺代碼。

如上：前端調用結果彈出：alert('true')