[JSONP] Crossdomain 해결을 위한 JSONP 설명

우선 크로스도메인 문제에 대해서 이야기 하자면 자바스크립트는 기본적으로 동일 도메인이 아닌(서브도메인도 다른 도메인으로 인식) 경우에는 데이터를 수용 할 수 없게 되어 있다.

이유인 즉 센드박스 어쩌고 저쩌고 하는 보안 문제 때문인데 쉽게 설명 하자면 악의적인 내용을 외부 사이트에 심어 두고 실행 되게 하는 일을 막기 위해서이다.

어째건 이런 제약이 일반 웹에서는(모바일 웹 포함) 크게 문제 될거 없다. 왜냐하면 proxy 페이지를 내 서버에 둬서 프로그램으로 xml,json  등의 자료 또는 text html 등의 자료를 가져 와서 우리 입맛에 맞게 가공해서 내 도메인에서 제공해 주는 거 처럼 꾸미면 되니까.

하지만 하이브리드앱을 하게 되면 이게 심각한 문제가 된다. 왜냐 하면 데이터를 가져올 방법이 제한 되기 때문에 (폰갭의 플러그인을 개발 해서 사용하면 되긴 하겠지만 )

그래서 타 도메인의 자료를 공유하는 방법이 필요하게 된 JSON 측에서 제시한게 JSONP 이다. 

이것은 그냥 데이터가 아니라 callbak 이라는 특이한 방식을 제시 함으로 데이터를 가져 올 수 있게 처리 한 것이다.

말이 어렵지 다음 코드를 보면 이해하기 쉽다. (jquery 기준으로 설명 하겠다.)

$.getJSON("http://mysite.com/jsonptest.php?callbak=?",{data1:"a",data2:"2"},function(data) {

//data 로 받은 값을 처리 하면 된다. 값은 JSON 형태 이다.

});

보면 일반 JSON 형식하고 다른게 주소 뒤에 ?callbak=? 이게 붙었다는 정도.. 

(참고하라고 일반 $.ajax 함수 호출 형태도 올려 놓는다.)

$.ajax(

    url:"http://mysite.com/jsonptest.php",

    datatype:"jsonp",

    callback:"callback",

    function(data) {

        //data로 받은 값을 처리

    }

);

어째건 저렇게 호출 해서 그 다음 부터는 JSON 하고 같은 방식으로 데이터를 처리 하면 된다.

그럼 서버쪽(http://mysite.com/jsonptest.php) 은 어떻게 구성 되느냐

이걸 모르면 저걸 하나 마나겠지.. 

(php로 설명 하겠음)

<?php

    $data = array(.......);

    echo $_GET["callback"]."(".json_encode($data).");";

?>

일반 JSON 데이터와 다른 부분이 보이는가? $_GET["callback"] 이부분이 추가 되었지. 이건 jsonp 에서 넘겨 줄때 만든 파라메타명.. 값은 랜덤하게 만들어 진다. 그걸 받아서 서로 체크 해서 맞으면 데이터를 받는 다는 개념인 것이다. 매번 새로 만들어 지는 것이기 때문에 신뢰할 수 있다 라고 생각 하면 되겠지.

그 다음부터는 알아서 파싱 ..

출처: http://blog.daum.net/skynunmul/24