DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 詳解Ajax跨域(jsonp) 調用JAVA後台
詳解Ajax跨域(jsonp) 調用JAVA後台
編輯:AJAX基礎知識     

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代碼

$.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')  

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved