자바스크립트의 보안 정책 중 하나인 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 통신
1 2 3 4 | { 'result': 'user', 'go': '테스트'} |
1 2 3 4 5 | function(data) { alert(data.result + ", " + data.go); }); |
1 2 3 4 5 6 7 8 9 10 11 | $.ajax({ 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();} |
| jQuery17204359748272690922_1338291446125({"result":"user","go":"테스트"}) |
결과
'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 |