CrossDomain Ajax 호출 #1 : jQuery JSONP ajax 호출 이용.
뭐 아무튼 이걸 해결하기 위한 방법으로 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
$.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){ //d.key; });
jQuery에서 jsonp 호출하는 방법#2
$.ajax({ url : "http://127.0.0.1:8080/server/data.jsp", 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
<!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({ url : "http://127.0.0.1:8080/server/data.jsp", 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를 사용했다.
<%@ 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});ajax로 호출한 url 경로에 맞게금 /server/data.jsp 로 저장하고 http://localhost:8080/client.html 로 접속해보자. 왜냐하면 localhost 랑 127.0.0.1 은 도메인이 다르니깐.

음 잘 작동된다~~ 초간단 심플 예제이기 때문에 간단하게 JSP로 구현했는데 다음번에 쫌더 실제적으로 프로젝트에 써먹을수 있도록 Spring으로 예제를 하나 맹글어 봐야긋다~

'잡다구리 샘플' 카테고리의 다른 글
-
-
스토브 2014.06.30 15:15 신고
jsonp 는 페이지를 가져올때 쓰는게 아니라 데이터를 가져올때 쓰는거라서...
페이지를 가져올려면 dataType 으로 jsonp 대신 html 을 지정해 주시면 되요~
jquery ajax 함수나 load 함수를 이용하시면 간단히 div 영역에 페이지를 로드할수 있어요~
페이지를 로드할 div id 가 <div id="test"></div> 요렇다고 하면
$.ajax({
url : "로드할 페이지 경로",
// url 호출시 같이 넘겨질 파라메터
data : {
// 요렇게 data 로 파라메터를 넘기면 로드할 페이지 경로?a=파라메터값1&b=파라메터값2 와 동일하게 작동해요~
a : "파라메터값1",
b : "파라메터값2"
}
dataType : "html",
success : function(result){
// result 에는 로드된 html 이 담겨져 있어요~
// result 를 test div html 로 끼워넣기
$("#test").html(result);
}
});
그리고 load 함수를 써서 하신다면
$("#test").load("로드할 페이지 경로"); 요렇게 하면 됩니다~
그런데 load 함수를 쓰면 파라메터를 url 뒤에다 일일히 써줘야 되서 파라메터 필요없는 단순한 페이지만 로딩할려고 할때 쓰면 편리하겠쬬~~?
댓글로 작성하는 글은 들여쓰기가 안되서 보기 쫌 어렵네요~
-