JSONP 가이드

Jsonp(JSON with Padding)은 json의 하나의 "사용 패턴"으로, 웹 페이지가 다른 도메인（웹사이트）에서 자료를 가져올 수 있게 해줍니다. 즉, 데이터를 다른 도메인에서 읽습니다。

JSONP이란 무엇인가요？

JSONP은 패딩이 있는 JSON을 의미합니다。

콰이어스 전략 때문에 다른 도메인에서 파일을 요청할 때 문제가 발생할 수 있습니다。

다른 도메인에서 외부 스크립트를 요청할 때 이 문제가 발생하지 않습니다。

JSONP은 이 장점을 활용하고 사용합니다<script>표시자 대신 XMLHttpRequest 객체를 사용하여 파일을 요청합니다。

　　<script src="jsonp_demo.php">

서버 파일（jsonp_demo.php）은 결과를 함수 호출로 포장합니다：

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

이름이 "myFunc"인 함수는 클라이언트에서 있으며 JSON 데이터를 처리할 수 있습니다：

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

JSON과 JSONP 간의 차이

JSON: JavaScript는 JSON(JavaScript Object Notation)을 통해 네트워크를 통해 데이터를 교환합니다. JSON 데이터는 단순히 문자열 형식의 JavaScript 객체입니다.

　　{ "name":"Seagull", "age":22, "city":"New Delhi" })

JSONP: JSONP는 패딩이 있는 JSON입니다. 여기서 패딩은 함수를 JSON에 포함하고, 다시 요청으로 반환하는 것을 의미합니다.

　　myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

JSONP 사용 방법

• HTML 코드에서 script 태그를 포함합니다. script 태그의 원본은 데이터를 가져오려는 URL입니다. 웹 서비스는 콜백 함수를 지정할 수 있습니다. URL의 마지막에는 callback 파라미터가 포함됩니다.

• 브라우저가 script 요소를 만나면, 원본 URL로 HTTP 요청을 보냅니다.

• 서버는 함수 호출에 포함된 JSON을 통해 응답을 보냅니다.

• 브라우저는 문자열 형식의 JSON 응답을 해석하고 JavaScript 객체로 변환합니다. 콜백 함수를 호출하고 생성된 객체를 전달합니다.

동적 스크립트 태그 생성

위의 예제는 페이지 로드 시 스크립트 태그 위치에 따라 "myFunc" 기능을 실행합니다.

하지만, 필요할 때만 스크립트 태그를 생성해야 합니다.

아래의 예제는 버튼 클릭 시 생성하고 삽입합니다<script>표시:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}