CrossDomain Ajax 호출 #1 : jQuery JSONP ajax 호출 이용.
잡다구리 샘플 2011. 8. 10. 00:34
Ajax 로 다른 도메인에 있는 url 을 호출해 데이터나 HTML을 가져오는건 보안상 안된다고 한다. 되면 참 좋을텐데;;
뭐 아무튼 이걸 해결하기 위한 방법으로 JSONP 라는 형식으로 호출하던가 아니면 Proxy Servlet 을 하나 맹글어 그 서블릿을 거쳐 HttpClient 로 가져오는 방법, 훌래쉬를 이용하는 방법이 있다고 한다.!
그중에서 이번엔 JSONP 형식으로 호출하는 방법을 연구해 보겠다.
JSONP 형식이란 뭐 별건 아닌것 같고 기존에 서버에서 리턴해 주던
{"key1" : "value1", "key2" : "value2"} 요런 json 문자열을
callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 임의의 함수를 호출해 주는 형식의 문자열로 리턴해 주는것을 말하는것 같다.
즉, jsonp 로 ajax 호출을 하기 위해선 아무 url 이나 안되고 callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 함수안에 json 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.
각설하고 jQuery를 활용해 맹글어 보자.
jQuery에서 jsonp 호출하는 방법#1
jQuery에서 jsonp 호출하는 방법#2
방법#1 이나 방법#2는 작동하는게 동일하다. 취향에 맞게 쓰임새에 맞게 쓰면된다. 개인적으로 방법#2 를 여러가지 원하는 ajax 호출 옵션을 줄수 있어서 더 좋아한다.
살짝 설명해 보면 방법#2 에서 쓴 ajax 옵션중 jsonp는 데이터를 넘겨줄 서버에서 받는 callback 함수명 파라메터이다. 서버에 따라 원하는 callback 함수명을 적어줘야 한다. 방법#1을 보면 대충 이해할 수 있다.
jsonp 옵션에다 적어준 함수명은 ajax 호출 url 뒤에다 방법#1에서 처럼 파라메터 형식으로 자동 추가된다.
전체소스코드 client.html
다음으로 간단한 테스트를 위해 초간단 심플 데이터 제공용 jsp 파일을 하나 맹글어 보자. JSON 변환용 라이브러리로 Jackson JSON Processor를 사용했다.
ajax로 호출한 url 경로에 맞게금 /server/data.jsp 로 저장하고 http://localhost:8080/client.html 로 접속해보자. 왜냐하면 localhost 랑 127.0.0.1 은 도메인이 다르니깐. 
음 잘 작동된다~~ 초간단 심플 예제이기 때문에 간단하게 JSP로 구현했는데 다음번에 쫌더 실제적으로 프로젝트에 써먹을수 있도록 Spring으로 예제를 하나 맹글어 봐야긋다~
[샘플소스]CrossDomain1.war
뭐 아무튼 이걸 해결하기 위한 방법으로 JSONP 라는 형식으로 호출하던가 아니면 Proxy Servlet 을 하나 맹글어 그 서블릿을 거쳐 HttpClient 로 가져오는 방법, 훌래쉬를 이용하는 방법이 있다고 한다.!
그중에서 이번엔 JSONP 형식으로 호출하는 방법을 연구해 보겠다.
JSONP 형식이란 뭐 별건 아닌것 같고 기존에 서버에서 리턴해 주던
{"key1" : "value1", "key2" : "value2"} 요런 json 문자열을
callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 임의의 함수를 호출해 주는 형식의 문자열로 리턴해 주는것을 말하는것 같다.
즉, jsonp 로 ajax 호출을 하기 위해선 아무 url 이나 안되고 callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 함수안에 json 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.
각설하고 jQuery를 활용해 맹글어 보자.
jQuery에서 jsonp 호출하는 방법#1
1 2 3 |
jQuery에서 jsonp 호출하는 방법#2
1 2 3 4 5 6 7 8 | $.ajax({ dataType : "jsonp", jsonp : "callback", success : function(d){ // d.key; }}); |
방법#1 이나 방법#2는 작동하는게 동일하다. 취향에 맞게 쓰임새에 맞게 쓰면된다. 개인적으로 방법#2 를 여러가지 원하는 ajax 호출 옵션을 줄수 있어서 더 좋아한다.
살짝 설명해 보면 방법#2 에서 쓴 ajax 옵션중 jsonp는 데이터를 넘겨줄 서버에서 받는 callback 함수명 파라메터이다. 서버에 따라 원하는 callback 함수명을 적어줘야 한다. 방법#1을 보면 대충 이해할 수 있다.
jsonp 옵션에다 적어준 함수명은 ajax 호출 url 뒤에다 방법#1에서 처럼 파라메터 형식으로 자동 추가된다.
전체소스코드 client.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jsonp test with jquery</title> <script type="text/javascript" src="/resource/js/jquery-1.6.2.min.js"></script> <script> $(document).ready(function(){ $("#testBtn").click(function(){ $.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){ $.each(d, function(k, v){ $("#getjson").append("<div>" + k + " : " + v + "</div>"); }); $("#getjson").show(); }); $.ajax({ dataType : "jsonp", jsonp : "callback", success : function(d){ $.each(d, function(k, v){ $("#ajax").append("<div>" + k + " : " + v + "</div>"); }); $("#ajax").show(); } }); }); }); </script> <style> div{margin-bottom:10px;padding:2px;} #getjson{border:1px solid red;display:none;} #ajax{border:1px solid blue;display:none;} </style></head><body> <button id="testBtn">테스트!</button> <div id="getjson"></div> <div id="ajax"></div></body></html> |
다음으로 간단한 테스트를 위해 초간단 심플 데이터 제공용 jsp 파일을 하나 맹글어 보자. JSON 변환용 라이브러리로 Jackson JSON Processor를 사용했다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <%@ 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<String, String> dummyData = new HashMap<String, String>(); 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}); |
음 잘 작동된다~~ 초간단 심플 예제이기 때문에 간단하게 JSP로 구현했는데 다음번에 쫌더 실제적으로 프로젝트에 써먹을수 있도록 Spring으로 예제를 하나 맹글어 봐야긋다~
[샘플소스]CrossDomain1.war
