JSONP – 원격 데이터 전송

qpress 2020년 3월 17일 27

다른 도메인 또는 서버의 데이터를 가져오거나 화면에 표시할때 가장 많이 사용해 온 것이 IFRAME과 XMLHttpRequest인데 최신 브라우저들은 보안 문제로 이에 대한 제한 장치를 두고 있다. 바로 ‘Cross Domain’ 이슈인데, 다른 도메인의 내용을 호출할때 차단해버리는 것이다. 즉, IFRAME과 XMLHttpRequest 는 사실상 같은 도메인 하에서만 사용할 수 있게 되었다고 볼 수있다.

이러한 Cross Domain 이슈 없이 다른 도메인의 데이터를 전송해서 받는 방법으로 JSONP 가 있다. JSONP는 ‘ XMLHttpRequest’를 사용하지 않고 ‘script’ 태그를 사용하여 다른도메인의 파일을 읽는 방식을 사용한다.

1.처리할 함수 만들기

function show_name(obj) {
    console.log(obj.name);
}

브라우저 콘솔에 메시지를 출력하는 아주 간단한 자바스크립트 함수를 현재의 페이지에 작성한다. 이 함수는 아직 호출하는 곳이 없기 때문에 작동하지 않는 상태인데 이 함수를 다른도메인의 파일에서 호출하는 방식이 바로 JSONP라고 할 수 있다.

2.원격 도메인의 PHP 작성

<?php
    $myJSON = '{ "name":"John", "age":30, "city":"New York" }';
    echo "show_name(".$myJSON.");";
?>

이 PHP 파일의 내용은 $myJSON Object를 만들고 ‘show_name’이라는 함수를 출력하는 역할을 한다. 다른도메인(다른 서버)의 파일이므로 show_name 함수는 찾을 수 없는 상태이다. PHP 파일의 이름은 ‘demo.php’로 가정한다.

3.함수 실행

<script src="http://www.domein.com/demo.php">

script 코드를 현재의 파일 즉, show_name 함수가 있는 파일에 적용함으로써, 원격의 demo.php 파일이 호출되어 show_name이라는 함수가 실행 된다. 즉, 다른 도메인에 있는 $myJSON이라는 데이터를 현재의 로컬에서 활용할수 있다.

* HTML 코드 가져오기

다른 도메인에 작성된 HTML 코드를 가져 오기 위해서는 HTML 코드 자체를 Object로 만들어서 넘겨 주어야 한다.

<?php
     ob_start();
?>
    <div>HTML 코드</div>
<?php
    $html = ob_get_clean();
    $html = json_encode($html);
    echo 'showHtml('.$html.');';
?>

HTML 코드를 $html이라는 변수에 할당하고, Json으로 변환하여 전송