[자바스크립트][비동기통신] JSONP

[자바스크립트][비동기통신] JSONP의 간단한 실습에 대한 포스팅입니다.

1. 개념 및 실습환경

• Ajax로 다른 도메인에 있는 url을 호출하기 위한 편법(?)으로 JSONP를 사용한다.
• 기존에 서버에서 리턴해 주던 {"key1" : "value1", "key2" : "value2"} 이런 식의 JSON 문자열을
• callback({"key1" : "value1", "key2" : "value2"}); 이런식으로 임의의 함수(callback)를 호출해 주는 형식의 문자열로 리턴해 주면 된다.
• 즉, JSONP 로 Ajax 호출을 하기 위해선 아무 url 이나 안되고 callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 함수안에 JSON 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.
• 실습 예제코드는 jquery에서 지원하는 Ajax 메서드를 이용하여 JSONP를 사용한다.

2. 클라이언트

3. 웹 서버(jsp)

* JSON 변환용 라이브러리로 Jackson JSON Processor를 사용 하였음.

<%@ page language="java" contentType="text/javascript; charset=UTF-8" pageEncoding="UTF-8"%>
 
<%@ page import="java.io.StringWriter"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Map"%>
 
<%@ page import="org.codehaus.jackson.map.ObjectMapper"%>
 
<%
    Map dummyData = new HashMap();
    dummyData.put("value1", "값1");
    dummyData.put("value2", "값2");
    dummyData.put("value3", "값3");
    dummyData.put("value4", "값4");
     
    StringWriter sw = new StringWriter();
     
    // Jackson JSON Mapper 를 사용해서 Map 을 JSON 문자열로 변환
    ObjectMapper mapper = new ObjectMapper();
    mapper.writeValue(sw, dummyData);
     
    request.setAttribute("sw", sw);
%>
 
<%-- ajax 에서 넘겨준 callback 함수 파라메터 가져오기 --%>
${param.callback}(${sw});