經過jsonp解決瀏覽器跨域問題

1、什麼是jsonp

爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

2、例子

一、客戶端寫法

這裏借用了前端jquery框架對jsonp的支持

var ajaxUrl = "http://192.168.8.141:9092/project/rest/team/matchResult/1/20/1/1000";


function localHandler(data) {
	console.log("fengshu")
	console.log(data);
}

var ajaxParam = {
	async: false,
	url: ajaxUrl, 
	type: "GET",
	dataType: 'jsonp',//非正式跨域傳輸協議
	jsonp: 'localHandler',
	success: function (json) {
		//回調數據在localHandler處理
	}
};
$.ajax(ajaxParam);

二、服務器端寫法

@RequestMapping("/matchResult/{page}/{pageSize}/{type}/{matchId}")
	public  void getMatchResult(HttpServletResponse response, @PathVariable("page") int page,
			@PathVariable("pageSize") int pageSize, @PathVariable("type") String type,@PathVariable("matchId") String matchId) {
		EntityList<MatchResult> datas = dddService.getTeamRanks(matchId,type,page,pageSize);
		ObjectMapper objectMapper = new ObjectMapper();
		String jsonResult=null;
		try {
			jsonResult = objectMapper.writeValueAsString(datas);
		} catch (JsonGenerationException e1) {
			e1.printStackTrace();
		} catch (JsonMappingException e1) {
			e1.printStackTrace();
		} catch (IOException e1) {
			e1.printStackTrace();
		}
		PrintWriter out=null;
		response.setCharacterEncoding("UTF-8");
		try {
			out = response.getWriter();
			
		} catch (IOException e) {
			e.printStackTrace();
		}  out.println( "localHandler("+jsonResult + ")");
                out.close();
	}

3、總結

目前在瀏覽器端使用json傳輸數據jsonp傳輸協議是解決跨域問題的首選方案