JSONP 의 작동원리

By | 2020년 4월 28일
0 Comment
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 파라미터를 이용해 함수명을 입력해주면, 클라이언트 서버의 콜백함수가 실행됩니다.

Post Views: 733

답글 남기기