JavaScript에서 도메인 간 통신에 JSONP를 사용하는 방법은 무엇입니까?

도메인 간 통신을 위해 JavaScript에서 JSONP를 생성하는 방법

교차 출처 요청을 처리할 때 악명 높은 동일 출처 정책은 방해가 됩니다. 그러나 JSONP(JSON with Padding)는 이러한 제한을 우회하기 위한 영리한 솔루션으로 설계되었습니다.

JSONP는 어떻게 작동하나요?

JSONP는 웹 브라우저의 동작을 영리하게 활용합니다. . GET 요청에 콜백이라는 매개변수를 제공하면 서버가 JSON 데이터를 JavaScript 함수 호출로 래핑할 수 있습니다. 그런 다음 브라우저는 JSON 데이터를 인수로 전달하여 함수를 실행합니다.

PHP에서 서버 측 콜백 API 생성

PHP를 사용하는 경우 서버에서 다음 단계를 구현합니다.

1. GET 요청에서 콜백 매개변수를 수락합니다.
2. Content-Type 및 Access-Control 헤더를 포함하여 적절한 HTTP 헤더를 설정합니다.
3. JSON 데이터 주위에 콜백 JavaScript 함수를 래핑합니다.

<code class="php"><?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

클라이언트 측에서 JSONP 서비스 사용

JSONP를 활용하려면 클라이언트측 서비스를 사용하려면 다음 예를 따르세요.

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

이 스크립트는 수신 JSON 데이터를 처리하는 수신자 함수를 생성한 다음 data-service.php 파일을 동적으로 로드하여 콜백 함수를 논쟁.

위 내용은 JavaScript에서 도메인 간 통신에 JSONP를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!