詳解Ajax跨域呼叫JAVA後台_AJAX相關

本篇文章主要介紹了詳解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標籤），這就可以實現透過呼叫站外程序對本地資源進行更改了。另外，透過3f1c4e4b6b16bbbd69b2ee476dc4f83a 標記的使用，就可從服務端直接傳回可執行的JavaScript函數呼叫或JSON資料。

3. JSONP原理與實作

先在客戶端註冊一個callback, 然後把callback的名字傳給伺服器。此時，伺服器先生成 JSON資料。然後以JavaScript 語法的方式，產生一個function, function名字就是傳遞上來的參數jsonp. 

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

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

具體程式碼操作：

1，js程式碼

$.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程式碼

@RequestMapping(value = "authCode")

@ResponseBody

public String getMobileAuthCode( HttpServletRequest request, String callback)

    throws Exception {

  String result = "{'ret':'true'}";

  //加上返回参数

  result=callback+"("+result+")";

  return result;

}

如上：前端呼叫結果彈出：alert('true' )　　

以上是詳解Ajax跨域呼叫JAVA後台_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章！