Table of Contents
JSONP 의 작동원리
원칙적으로 자바스크립트는 도메인이 다른 서버의 컨텐츠를 가져올 수 없습니다.
이를 회피하기 위해 등장한 방법론이 JSONP
입니다.
원리는 script
태그의 src
는 이러한 제한이 없이 도메인이 다르더라도 컨텐츠를 가져올 수 있는 것을 이용하는 것입니다.
클라이언트 서버
클라이언트는 script
태그를 동적으로 생성하고, src 를 원하는 원격지 서버 주소로 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>JSONP Sample Code</title>
<meta charset="utf-8">
<script class="language-markup">
function find()
{
var j = document.createElement('script');
var s = 1234;
var u = 'http://b.xxxxxx.net/find.php?callback=loadList&s=' + s;
j.setAttribute('src', u);
j.setAttribute('type', 'text/javascript');
document.getElementsByTagName('body')[0].appendChild(j);
return false;
}
function loadList(str)
{
alert(str.resultCode);
}
</script>
</head>
<body>
<input id="btn" type="button" value="테스트" onclick="find()" />
</body>
</html>
원격 서버
동적으로 아래와 같은 결과를 리턴하면 됩니다.
loadList({
"resultCode" : "00"
});
callback
파라미터를 이용해 함수명을 입력해주면, 클라이언트 서버의 콜백함수가 실행됩니다.