JSONP

JSONP는 도메인 간 문제(cross-domain issues)에 대한 걱정없이, JSON 데이터를 전송하는 방법입니다.

JSONP는 XMLHttpRequest 객체를 사용하지 않습니다.

JSONP는 대신 <script> 태그를 사용합니다.


JSONP 소개

다른 도메인에 파일을 요청하면, 도메인 간 정책(cross-domain policy)으로 인해, 문제가 발생할 수 있습니다.

다른 도메인에서 외부(external) script를 요청하는 것은, 이 문제가 없습니다.

JSONP는 이 장점을 사용하고, XMLHttpRequest 객체 대신 script 태그를 사용하여 파일을 요청합니다.

Server 파일

서버의 파일은 함수 호출(function call) 안에 결과를 래핑합니다(wraps):

Example

myFunc({ “name”:”John”, “age”:30, “city”:”New York” });

결과는 JSON 데이터를 매개 변수로 사용하여 “myFunc”으로 명명된 함수에 호출된 내용을 반환합니다.

함수는 클라이언트에 있어야 합니다.

자바스크립트 함수

“myFunc”이라고 명명된 함수는 클라이언트에 있으며, JSON 데이터를 처리할 준비가 되어 있습니다:

Example

script 태그를 사용하여 JSON을 요청합니다

PHP 파일은 JSON 데이터를 처리할 함수에 호출한 내용을 반환합니다.

John


동적 Script 태그 만들기

위의 예제는, script 태그를 넣은 위치를 기반으로, 페이지가 로드될 때 “myFunc”함수를 실행합니다. 이는 매우 만족스럽지 않습니다.

스크립트 태그는 필요한 경우에만 만들어야 합니다.:

Example

Click the Button.

src 속성이있는 script 태그가 만들어지고, 문서에 저장됩니다.

PHP 파일은, JSON 객체를 매개변수로 사용하여, 함수에 호출된 내용을 반환합니다.


동적 JSONP 결과

위의 예제는 여전히 매우 정적입니다.

JSON을 PHP 파일로 보내서, 예제를 동적으로 만들고, php 파일이 얻은 정보를 기반으로 JSON 객체를 반환하도록 합니다.

PHP 파일

PHP 파일 설명:

  • PHP 함수 json_decode()를 사용하여, 요청을 객체로 변환합니다.
  • 데이터베이스에 액세스하여, 요청된 데이터로 배열을 채웁니다.
  • 배열을 객체에 추가합니다.
  • json_encode() 함수를 사용하여, 배열을 JSON으로 변환합니다.
  • 반환된 객체를 "myFunc()"으로 둘러쌉니다.

JavaScript Example

“myFunc” 함수는 php 파일에서 호출됩니다:

테스크 결과는 동적 JSONP 결과 – 데이터베이스에서 볼 수 있습니다.


Callback 함수

서버 파일을 제어할 수 없을 때 서버 파일이 올바른 함수를 호출하도록 하려면 어떻게해야 합니까?

때때로 서버 파일은 콜백 함수를 매개 변수로 제공합니다:

Example

Callback 함수로 요청

PHP 파일은 콜백으로 보내는 함수에 호출된 내용을 반환합니다.

출처: JSONP

댓글 남기기