bboss mvc結合jsonp實作跨站跨域應用間通訊功能介紹

本文介紹bboss mvc結合jsonp實作跨站跨域應用間通訊功能的使用方法和實作機制，切入主題。

bboss最新版本下載下傳：

https://github.com/bbossgroups/bbossgroups-3.5

bboss mvc最新版本通過mvc json插件MappingJacksonHttpMessageConverter支援jsonp資料協定來實作跨站跨域應用之間的互動通訊，使用方法如下。

1.伺服器端實作

伺服器端部署在執行個體工程：bestpractice\demoproject中，服務端程式為/demoproject/src/org/frameworkset/mvc/HelloWord.java

服務端控制器方法通過制定注解@ResponseBody的datatype屬性為jsonp來訓示mvc架構需要将響應值轉換為jsonp函數+json參數資料的合法JavaScript腳本傳回到用戶端

以便實作跨站跨域請求互動，HelloWord.java提供了兩個方法一個是應用于使用jquery的請求，一個應用于JavaScript标記請求

public @ResponseBody(datatype="jsonp") JsonpBean jsonpwithjquery()
	{
		JsonpBean jsonpbean = new JsonpBean();
		jsonpbean.setPrice("91.42");
		jsonpbean.setSymbol("IBM jquery jsonp");
		return jsonpbean;

	}
	public @ResponseBody(datatype="jsonp") JsonpBean jsonp()
	{
		JsonpBean jsonpbean = new JsonpBean();
		jsonpbean.setPrice("91.42");
		jsonpbean.setSymbol("IBM");
		return jsonpbean;
	}      

分别對應請求位址為：

http://localhost:8081/demoproject/examples/jsonpwithjquery.page

http://localhost:8081/demoproject/examples/jsonp.page

2.用戶端實作

用戶端應用和伺服器應用屬于兩個不同站點或者不同域名，

用戶端部署在bboss-mvc的web應用中,對應的通路位址為：

http://localhost:8081/bboss-mvc/jsp/jsonp/testjsonp.jsp

testjsonp.jsp相關的代碼如下：

<!-- 普通的jsonp調用示例開始，定義跨域回調函數 -->
	<script type="text/javascript">
        	function jsonpCallback(result)
        	{
				alert("aaa:" + result.symbol);//彈出跨站 請求傳回的json資料對象的symbol屬性的值
        	}
    	</script>
    <!-- 普通的jsonp調用示例，向另一個應用demoproject發起mvc請求，并指參數callback（參數名字可任意指定）指定回調函數jsonpCallback-->
	<script type="text/javascript" src="http://localhost:8081/demoproject/examples/jsonp.page?jsonp_callback=jsonpCallback"></script>
	<!-- 普通的jsonp調用示例結束-->
	
	<!-- 采用jquery實作jsonp調用示例開始-->
	<script src="<%=request.getContextPath() %>/include/jquery-1.4.2.min.js" type="text/javascript"></script>   
	<!-- 采用jquery實作jsonp調用示例--> 
	<script type="text/javascript">
        $(function() {
            $.getJSON("http://localhost:8081/demoproject/examples/jsonpwithjquery.page?jsonp_callback=?", function(data) {
            	alert("bbb:" + data.symbol);//彈出跨站 請求傳回的json資料對象的symbol屬性的值
            });
            //jsonp1337140657188({"postalcodes":[{"adminName2":"Westchester","adminCode2":"119","postalcode":"10504","adminCode1":"NY","countryCode":"US","lng":-73.700942,"placeName":"Armonk","lat":41.136002,"adminName1":"New York"}]});
            $.getJSON("http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?", function(data) {
            	alert( data.postalcodes[0].adminName2);//這是一個網際網路跨域調用的執行個體，確定能夠上網，彈出跨站 請求傳回的json資料對象數組屬性的第一個元素的屬性adminName2的值
            }); 
        });        
    </script>
	<!-- 采用jquery實作jsonp調用示例結束-->      

bboss mvc對jsonp提供了預設的支援，服務端json資料請求分别帶了參數jsonp_callback

http://localhost:8081/demoproject/examples/jsonpwithjquery.page?jsonp_callback=?

jsonpCallback=?，是因為使用了jquery的$.getJSON方法來發起該請求，回調函數是個匿名函數，jquery架構會為該匿名函數産生一個随機函數名稱，然後将?替換為實際的函數名稱

送出給伺服器端

http://localhost:8081/demoproject/examples/jsonp.page?jsonp_callback=jsonpCallback

jsonp_callback=jsonpCallback，可以看出我們已經直接指定了回調函數的名稱，就是之前定義的實名函數jsonpCallback()

需要說明的是，回調函數對應的參數名稱jsonp_callback是MappingJacksonHttpMessageConverter内置的預設的回調函數參數名稱，

我們可以全局地改變這個參數的名稱，在bboss-mvc.xml檔案中在MappingJacksonHttpMessageConverter插件上修改f:jsonpCallback屬性的值即可：

<property class="org.frameworkset.http.converter.json.MappingJacksonHttpMessageConverter"
					f:jsonpCallback="jsonp_callback"/>      

3.執行執行個體

我們隻需要将bboss-mvc下的WebRoot和bestpractice\demoproject\WebRoot對應的應用部署到tomcat并啟動tomcat，然後在浏覽器中輸入

既可以看到實際的效果