java結合使用Jsonp的例子

更多：js跨域問題解釋 解決方案值使用jsonp或jQuery

Jsonp和java操做例子

 介紹JSONP以前，先簡單的介紹一些JSON。JSON是JavaScript Object Notation的縮寫，是一種輕量的、可讀的基於文本的數據交換開放標準。源於JavsScript編程語言中對簡單數據結構和關聯數組的展現功能。它是僅含有數據對和簡單括號結構的純文本，所以可經過許多途徑進行JSON消息的傳遞。

 

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文檔，此時數據做爲參數，傳入到了客戶端預先定義好的回調函數裏(動態執行回調函數) 。

 

 

其實 JSONP是個很簡單的一個東西。主要是利用了 <script/>標籤對javascript文檔的動態解析來實現。（其實也能夠用eval函數） 。

 

4.下面分別用js和jquery實現代碼以下：

test.jsp中的js代碼：

 

js：

 

<script type="text/javascript">
    function jsonpCallback(result){
       alert(result[1].name);
    }
</script>
<script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>

 

 或jquery代碼：

 

 

<script type="text/javascript">
    $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){
        alert(json[0].name);
    });
</script>

 

 

jsonp.jsp代碼：

 

<%
     String callback = request.getParameter("callback");
     out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
     out.print(callback);
%>

 

固然，後臺能夠用action或servlet等實現。

 

最後，只要是瀏覽器輸入http://localhost:8080/Jsonp/test.jsp就會彈出John了。