[jsp] jsonp를 이용한 다른 도메인간의 ajax / json 통신 (크로스도메인)

서로 다른 도메인으로 운영중인 사이트 간에 ajax로 값을 주고 받아야 하는 일이 생겼는데 일반적인 ajax 방식으로 하면 크로스도메인 때문에 문제가 생길 수 있습니다. 그래서 이 때 사용하는것이 jsonp를 이용한 방법인데요.

기존 방법과는 크게 다르지 않지만 응답하는 서버 쪽에서 callback 파라미터를 받아서 그대로 출력해줘야 한다는 점이 조금 다릅니다.

<클라이언트 호출 부분>

$.ajax({

type : "POST",

url : "http://localhost/Check.do", //요청 할 URL

data : { test:'test'}, //넘길 파라미터

contentType: "text/plain; charset=utf-8",

jsonp : "callback",

dataType : "jsonp",

withCredentials: true,

success : function(data) {

//통신이 정상적으로 되었을때 실행 할 내용

if(data != null)    {

if(data.flag == "success"){

alert(data.message);

}else{

alert(data.message);

}

}

 },

 error : function(data) {

alert("접속 도중 오류가 발생했습니다. (통신오류)"); //에러시 실행 할 내용

}

});

위와 같이 jsonp 타입으로 url에 ajax를 요청하면 data 필드에 입력한 파라미터 외에 callback 이라는 파라미터가 추가적으로 서버에 전달되게 됩니다. 그럼 서버는 아래와 같이 callback 파라미터를 받아서 다시 json 으로 출력해줄때 같이 출력해주면 클라이언트에서 데이터를 받을 수 있게 됩니다.

<서버 사이드 응답 부분>

@RequestMapping("/Check.do")

public void userCheck(

HttpServletRequest req, 

HttpServletResponse rep, 

HttpSession session, 

) throws IOException{

rep.setContentType("text/plain; charset=utf-8");

String test =

new String(ServletRequestUtils.getStringParameter(req, "test", "").getBytes("8859_1"),"UTF-8");

 String callback = ServletRequestUtils.getStringParameter(req, "callback", "");

//중간생략

out.println(callback+"(");    //파라미터로 넘어온 callback 값으로 감싸줍니다.

out.println("{\"flag\": \"success\", \"message\": \"인증 되었습니다.\"}");

out.println(")");

}

클라이언트 쪽에서 보낸 callback 값과 서버에서 응답할때 사용하는 callback 값이 동일해야 정상적인 통신이 됨을 유의하세요.