[출처] JSON과 JSONP 그리고 CrossDomain Ajax (리눅스) |작성자 비타덴트
JSON 과 JSONP, and CrossDomain Ajax
아마도 웹개발을 하면서 JSON을 모르거나 들어본 적이 없으신 분들 거의 없으실 겁니다.
var trip = {start: "seoul", end:"pusan"};
trip라는 변수는 전형적인 JSON Object를 가지게 됩니다.
JSON이 빛을 발할 때는 데이터 저장이나, 데이터를 불러오기 할 때
이 형식을 사용할 경우 정의가 명확해지고 다루기가 쉬워진다는 것이죠.
그 옛날에는 XML이라는 할아버지가 계셨으나, 이제는 돌아가시려고 하고,
사람들이 뒷방 늙은이 취급을 해서 인기가 시들시들해졌습니다.
그도 그럴것이 하나의 데이타를 정의하기 위한 부수적인 정의가 너무 많이 들어가는
치명적 단점이 있었죠.
그에 반해 JSON의 형태는 간단합니다.
정의 : 값
의 형태로 그야말로 다이어트 킹의 모습처럼 줄일 것 다 줄인 슬림 형태인 것이죠.
JSON 데이타는 이런식으로 사용 가능합니다.
function showTrip(data){ alert("start:" + data.start + ", End:" + data.end);}
호출은 다음과 같이 합니다.
showTrip({start : “seoul”, end: “pusan”});
이런식으로 하면 JSON 데이타를 이용할 수 있는데요,
보시기에도 엄청 간편해 보이지 않습니까?
자, 이번에는 동적으로 javascript를 삽입하는 구문을 한번 보겠습니다.
<script type="text/javascript">function showTrip(data){ alert("start:" + data.start + ", End:" + data.end);}var js_url = “trip.js”;//동적으로 외부 JS를 로딩하는 구문 삽입var script = document.createElement('script');script.setAttribute('src', js_url);document.getElementsByTagName('head')[0].appendChild(script);</script>
이 코드를 보시면,
동적으로
구문이 삽입이 됩니다.
trip.js 파일 안에
showTrip({start : "seoul", end: "pusan"});
이렇게 showTrip이 정의 되어 있다면,
위 구문은 showTrip이 실행 되게 되죠.
JSONP(JSON with Padding)이란 바로 이렇게 trip.js 파일 안쪽의 구문 처럼,
showTrip({start : “seoul”, end: “pusan”})
함수 호출에 둘러싸여있는 JSON 데이터를 말합니다.
따라서 JSONP가 제대로 실행 되기 위해서는 반드시 미리
정의된 함수가(글에선 showTrip) 있어야 가능하겠죠.
자, 그러면 JSON은 알겠고 많이 쓰는데, JSONP는 도데체 언제 쓰이느냐?
이게 질문이죠.
먼저 웹에서는 동일 출처 정책, 한국어로 하면 조금 어려운데 Same Origin Policy, 줄여서
SOP라는게 있습니다.
뭣이냐 하면,
www.greatgrape.co.kr
이라는 사이트가 있다고 합시다.
이 사이트에서
www.daum.com
의 사이트의 내용을 자바스크립트로 동적으로 가지고 오거나
Access하지 못합니다.
이해가 안되신다면 간단한 Jquery 구문으로
$.ajax({ url: "http://www.daum.net, data: {}, type: "POST", success: function(html){ $("body").html(html); }});
위와 같은 Ajax 호출 구문이 greatgrape.co.kr 사이트의
index.html 에 있다고 하면 실행이 될까요 안될까요?
100% 안된다는 말씀입니다.
보안상, 웹 정책상 Same Origin Policy에 걸려서 안됩니다.
이게 풀리면 타사이트의 컨텐츠가 마구마구 도용될 가능성이
있겠죠. 자기의 사이트를 다음 사이트처럼 돌릴 수도~ ㅎㅎㅎ
www.greatgrape.co.krblog.greatgrape.co.kr
섭도메인 형태의 위와 같은 두개의 도메인도 Same Origin Policy에 걸립니다.
Ajax 등으로 데이타 받으려면 안되기는 마찬가지입니다.
여튼 SOP는 이런 겁니다.
근데 다른 사이트의 데이타를 가지고 오고 싶은데
방법이 없냐구요?
있습니다. 그걸 위해 태어난 놈이 바로 JSONP입니다.
Ajax 등으로 호출을 할 경우에
JSONP 형태의 데이타로 리턴을 하고,
리턴된 데이타는 자동으로 실행이 되는 형태죠.
이 Mechanism이 실행되기 위해서는 JSONP 형태의 호출 함수를 제공하는
서버측이나, 요청을 하는 Client 측이나 모두 미리
어떤 함수로 JSON을 감싸서 던져줄 것이다 라는 약속이 되어 있어야 합니다.
그렇게 해야지만, 클라이언트는 서버에서 던지는 JSONP를 받아서 미리 정의되어 있는
함수로 바로 실행을 시키게 되는 것이죠. JQuery에서는 JSONP 호출 구문을
지원합니다.
$.getJSON(url + "&callback=?", function(data){ alert("start:" + data.start + ", end:" + data.end);});
위와 같은 호출 구문을 사용하면 JSONP 데이타를 SOP제한 없이
받으실 수 있습니다. 가령 아래와 같은 주소에서 JSONP 데이타를
넘겨준다고 가정하면,
http://www.greatgrape.co.kr/jsonp/trip?start=seoul&callback=showTrip
호출은
jQuery.getJSON("http://www.greatgrape.co.kr/jsonp/trip?start=seoul&callback=?",function(data) { alert("start: " + data.start + ", end: " + data.end);});
로 하면 됩니다. 이 때 callback 함수에 함수를 정의하지 않고 물음표로 준 것은
좀더 유연한 JSONP 호출을 만들어 줍니다. 무슨 말이냐 하면,
PHP 단에서 이렇게 짜여져 있다고 합시다.
$jsonData = getDataAsJson($_GET['start']);echo $_GET['callback'] . '(' . $jsonData . ');';// prints: jsonp1232617941775({"start" : "seoul", "end" : "pusan"});
이렇게 JSONP 호출 함수가 자동으로 받은 callback 함수를 그대로 싸서 뿌려주게 되는데요,
$.getJSON에서 ? 물음표로 해주면,
JQuery가 자동으로 인라인 함수의 이름을 받아서 넘겨 줍니다. (여기서는 jsonp1232617941775 )
신경 쓸 필요가 없이 getJSON 안의 인라인 함수가 실행이 되게 되는 것이죠. 참 편하죠~ ^^;
이렇게 JSONP를 사용할 경우 CrossDomain 간의 데이타 전송을 편하게
할 수 있습니다.
그리고 한걸음 더 나아가 자신이 개발한 서버 단의 어플리케이션의 일부 API를
공개하고 싶을 때, JSONP 형태의 요청에 한해서 Open 해줄 수 있습니다.
가령 그레이트그레이프(greatgrape)가 개발한 bikesoop.com 에서
최신 글 리스트를 다른 사이트에서도 요청하면 받을 수 있게 하고싶다… 그러면,
http://www.bikesoop.com/json/getNewestPosts
함수를 만들고, 이 함수에서 아래와 비슷한 형태의 구문을 만들어 주면 됩니다
$postList = array(...);$callbackFunc = $_GET['callback'];$echoStr = json_encode($postList);echo $callbackFunc . "(" . $echoStr . ")";
이처럼 JSONP는 잘 사용하면 SOP에 갇히지 않고 Cross Domain Ajax 를
굉장히 편하게 이용할 수 있습니다.
다만, 데이타를 주고 받을 때 Error Handling이 어렵고,
보안이 필요하거나 인증 정보의 전달에는 약점이 있습니다.
또한 최대 전달 용량이 브라우져마다 제한이 있기 때문에 잘 고려하여
사용하셔야 합니다.
