[jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식

타 브라우저간에 데이터를 주고받는 방식이 필요할때가 존재한다.

이럴경우 ajax로는 서로다른 도메인으로는 지원을 하지 않는다.

하지만 대안으로 나온 방법이 jsonp방식이다.

(조건은 서버측 코드를 핸들링할수 있어야 한다는 조건이다.)

클라이언트측 스크립트 소스는 다음과 같다. 

클라이언트측 포트는 8080이다

$(function(){
	$("#btn").click(function(){
		$.ajax({
				//호출할 원격URL
			    url : "http://localhost:7070/index.jsp",
				//jsonp방식으로 값을 받겠다.
			    dataType : "jsonp",
			 	//서버측에서 request.getparameter를 하여 받기위한 jsonp의 name
			 	//빼주게되면 default request.getParameter("callback") 으로 받게된다.
			    jsonp : "callback",
			    //async는 왜있는지 모르겠지만 jquery 1.8버전부터 jsonp에 같이 적용하라고 적혀있는듯한
			    //영어가.... 영어울렁증임 ㅠㅠ
				async: false,
				//success는 일반 json 방식과 같음
			    success : function(data){
					console.log("result data object",data);
			    }
			});	
	});
});

html태그는 그냥 버튼 하나만 존재한다.

<input type="button" id="btn" value="jsonp호출" />

원격지 소스관련 코드이다.

ExtJS 강좌에서도 내용을 올려놓았으나 jQuery 보시는분들을 위해서.... 

Spring 개발자는 해당 라이브러리를 이용하여도 무관하나 보통은 jackson 을 사용하는듯 하다

본인은 일반 jsp페이지로 샘플링을 할것이며

PHP환경은 PHP자체적으로 지원하는 함수를 이용하길 바람.

java 환경에서는 json-simple 라이브러리가 필요하다.

[다운로드 라이브러리]

json-simple-1.1.1.jar

별도로 사용하고계신 라이브러리가 있으시다면 무시하셔도 상관없음

서버 코드 부분

서버측 포트는 7070이다.

//클라이언트측 jsonp 속성의 지정해준 value값 =  callback이라 callback으로 받았음
String callBack = request.getParameter("callback");
//단순한 success object 생성
JSONObject jsonObj = new JSONObject();
jsonObj.put("success", true);
//다시 클라이언트로 던져준다/
PrintWriter pw = response.getWriter();
//대신, 클라이언트측에서 받은 callBack parameter + "(" + jsonObject의 문자열 + ")"
//형식으로 response 해주어야 함
pw.print(callBack+"("+jsonObj.toString()+")");
pw.flush();
pw.close();

위와같이 하게되면 jsonp받식으로 클라이언트의 $.ajax부분인 success 부분에서 값을 받을수있을것이다!! 

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!