bbossmvc結合jsonp實現跨站跨域應用間通訊功能介紹

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

bboss最新版本下載：

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

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

1.伺服器端實現

伺服器端部署在例項工程：bestpracticedemoproject中，服務端程式為/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和bestpracticedemoprojectWebRoot對應的應用部署到tomcat並啟動tomcat，然後在瀏覽器中輸入

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

既可以看到實際的效果