jsonp

jsonp 란?

전통적인 웹 브라우저에서는 same-origin-policy (SOP) 정책에 따라 다른 도메인간의 REQUEST을 제한하고 있다. 그러나 <script /> 태그는 SOP정책에 속하지 않는다는 사실을 근거로, 서로 다른 도메인간의 jsvascript 호출을 위하여 jsonp (또는 json with padding) 이 사용 되었다.

제한참조문서 : https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

jsonp의 원리

json의 형태를 먼저 알아보자

{

data1 : "data1",

data2 : "data2",

data3 : "data3"

}

자바스크립트에서 { } 은 객체 리터럴이다. 즉 위의 코드는 객체를 정의하기 위한 코드이며 , json은 객체를 정의하기 위한 문법이라고 볼 수 있다.

jsonp의 원리

먼저 ajax의 response 를 알아보자.

$.ajax({

url : "http://dev-troh.tistory.com/test.json",

type : "json"

}).done(function(data){

//data는 json 포맷으로 받게된다.

})

위의 코드에서 response로 받는 것은 json포맷인데 즉 객체를 받는 것이다. 그러면 전달 된 객체로 데이터 처리를 하는 것은 SOP 정책에 위배되지 않은 매우 일반적인 브라우저간 XMLHttpResquest 통신이라고 할 수 있다.

하지만 현재페이지 (http://dev-troh.tistory.com/admin/entry/post/) 에서 요청하는 ajax가 dev-troh.tistory.com/test.json 이 아닌 troh.tistory.com/test.json 으로 요청하게 되면 어떻게 될까? SOP 정책에 걸려서 데이터를 가져오지 못할 것이다. 이를 피하기 위해서는 어떻게 해야할까?

답은 <script /> 태그를 이용하는 것이다.

<script type="text/javascript" src="troh.tistory.com/test.json"></script>

위의 코드를 html에 선언하면 정상적으로 URL을 호출할 것이다. 그러나 json 안에 있는 코드는 객체를 정의하는 코드이지 실행코드가 아니다. 따라서 실행할 수 있는 형태로 바꾸어 주면 된다.

callback({

data1 : "data1",

data2 : "data2",

data3 : "data3"

})

자바스크립트에서 () 은 실행 구문이다. 즉 위의 코드는 callback이라는 함수에 json(객체)을 전달하여 실행하라는 의미이다.

<script type="text/javascript" src="troh.tistory.com/test.json"></script>

<script>

function callback(data){

//json처리..

}

</script>