728x90
반응형

자바스크립트의 보안 정책 중 하나인 SOP(Same-Origin Policy) 때문에 데이터를 호출하는 도메인과 데이터를 반환하는 도메인의 주소가 다르면 Ajax를 이용할 수 없다. 그러나 JSONP 라는 형식이나 Proxy 매시업 페이지를 통해 해결 할 수 있는데 여기서는 JSONP를 이용한 방법을 설명하겠다.

원래 Ajax의 코드는 아래와 같다. 그러나 아래 코드로는 Cross Domain에 직면했을때 정상적인 responseText를 얻을 수가 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
  type: "POST",
  url: "search.do",
  data: $('#searchbox').val(),
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  success: function(data) {
    if (data != null) {
      // ...
    } else {
      //....
    }
  }
});

그러므로 우리는 새로운 방법을 사용해야 한다.


JSONP(JSON with Padding) 을 이용한 Ajax 통신

 - 반환되는 데이터 (JSON)가 아래와 같다고 하자.

1
2
3
4
{
  'result': 'user',
  'go': '테스트'
}


 - 정상적인 데이터를 받기 위해서는 아래와 같이 작성해야 한다. (두 가지 방법 중 아무거나 해도 상관없다.)

 1. $.getJSON()

1
2
3
4
5
    function(data) {
            alert(data.result + ", " +  data.go);
    }
);
 
 2. $.ajax();

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    url : "http://ip:8080/jsp/upload",
    data : "id=user",
    dataType : "jsonp",
    jsonp : "callback",
    success: function(data) {
        if(data != null)    {
            alert(data.result + ", " +  data.go);
        }
    }
});
 

jQuery 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSON 콜백은 url?callback=? 라는 구문을 사용하여 지정할 수 있다.

$.getJSON() 방식을 살펴보면 url 맨 끝에 callback=이라는 문자열과 함께 실제 함수 이름 대신 ? 기호를 콜백 함수 이름으로 입력하는 것을 볼 수 있다. 이는 jQuery가 ? 기호를 인라인 함수를 호출하는 생성된 함수 이름(예:jsonp1234568416)으로 바꾸기때문이다. 굳이 ? 을 적을 필요는 없고 따로 처리하는 콜백함수가 있다면 해당 함수의 이름을 적어줘도 무방하다. 그러나 익명 메소드로 바로 처리할 경우 반드시 ? 를 써줘야 한다.


데이터 반환 (Servlet)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
 
  // 전송된 데이터를 추출(id와 콜백 메소드명)
  String id = request.getParameter("id");
  String callBack = request.getParameter("callback");
 
  // 반환 될 데이터
  JSONObject obj = new JSONObject();
  obj.put("result", id);
  obj.put("go", "테스트");
 
  // 호출 할 javascript 콜백 메소드를 지정 해 준다.
  PrintWriter out = response.getWriter();
  out.write(callBack + "(" + obj.toString() + ")");
  System.out.println(callBack + "(" + obj.toString() + ")");
 
  out.flush();
  out.close();
}

Serlvet으로 구현한 데이터 반환 메소드이다. JSONP는 Get방식으로만 데이터를 가져올 수 있으므로 doGet메소드에 로직을 작성하였다. 
위 코드를 살펴보면 먼저 전달받은 데이터들을 json 형태로 구성한 뒤 콜백함수의 이름으로 감싸줘야 한다. 

최종적으로 반환해야 할 문자열은 아래와 같다. 말 그대로 JSONP(json with padding)이다.

 jQuery17204359748272690922_1338291446125({"result":"user","go":"테스트"})


결과


출처 : http://warmz.tistory.com/739


728x90
반응형

'Web Programming > java-jsp' 카테고리의 다른 글

[펌] eclipse 톰캣 환경 설정하기~  (0) 2015.06.16
오라클 시노님, grant 설정  (0) 2015.06.01
암호화 MD5 vs SHA256  (0) 2015.04.07
DWR 사용시 Session 값 얻기  (0) 2015.04.07
USB 디버깅 ?  (0) 2015.04.06

+ Recent posts