jsonp 예제

0 0

php 파일에 JSON을 전송하여 예제를 동으로 만들고 php 파일이 얻는 정보에 따라 JSON 개체를 반환하도록 합니다. 일반 웹 페이지는 XMLHttpRequest 개체를 사용하여 원격 서버에서 데이터를 보내고 받을 수 있지만 동일한 원본 정책으로 수행할 수 있는 작업으로 제한됩니다. 이는 브라우저 보안 모델에서 중요한 개념이며 웹 브라우저에서 이 두 페이지의 출처가 동일한 경우 페이지 A의 스크립트만 B 페이지의 데이터에 액세스하도록 허용할 수 있습니다. 페이지의 출처는 프로토콜, 호스트 및 포트 번호로 정의됩니다. 예를 들어 이 페이지의 출처는 `https`, `www.sitepoint.com`, `80`입니다. 물론 실제로 jQuery의 JSONP 구현은 이러한 예제보다 약간 더 복잡합니다. 그러나 이제 기본에 대한 이해가 생겼습니다. 또한 JSONP를 통해 다양한 서비스에서 다양한 콘텐츠를 끌어들일 수 있습니다. 많은 유명 사이트는 미리 정의된 API를 통해 콘텐츠에 액세스할 수 있도록 JSONP 서비스(예: 플리커)를 제공합니다. 프로그램 가능한 웹 API 디렉터리에서 포괄적인 목록을 찾을 수 있습니다. 이전 예제에서 어떻게 보일지 살펴보겠습니다. 다음은 jsonCallback 함수에서 원래 JSON 데이터를 래핑하는 업데이트 된 JSON 파일입니다. 첫 번째 예제를 참조하여 .htaccess 파일(아파치가정)에 다음을 추가하여 다른 출처의 요청을 허용할 수 있습니다.

콜백 기능을 사용하여 콘솔에 대한 응답을 기록합니다. 위의 예제에서는 스크립트 태그를 넣은 위치에 따라 페이지가 로드될 때 „myFunc“ 함수를 실행합니다. 서버는 JSONP에 대한 지원이 있어야합니다, 예를 들어 익스프레스는 Response.jsonp() 같은 Response.jsonp() 메서드를 사용할 수 있지만 JSONP 콜백을 처리합니다: 근본적으로, 그게 전부입니다! 작업 jsFiddle 예제를 확인하십시오. 다행히도 모든 것이 동일한 원산지 정책의 영향을 받는 것은 아닙니다. 예를 들어 다른 도메인의 이미지 나 스크립트를 페이지에 로드할 수 있습니다.이 방법은 CDN에서 jQuery(예: )를 포함할 때 수행하는 작업입니다.