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;
}
|
如上：前端呼叫結果彈出：alert('true')