모바일 인터넷의 급속한 발전으로 인해 Web API를 사용하여 데이터 서비스를 제공하는 웹 사이트가 점점 더 많아지고 있습니다. Web API를 사용하여 프런트 엔드에서 데이터를 얻을 때 일반적으로 AJAX를 사용하여 비동기 요청을 합니다. 그러나 브라우저의 동일 출처 정책 제한으로 인해 AJAX는 동일 출처 서버에서만 데이터를 요청할 수 있으며, 이로 인해 프런트 엔드의 데이터 획득 기능 범위가 제한됩니다.
크로스 도메인 문제를 해결하기 위해 jsonP 기술이 탄생했습니다. 프런트엔드 데이터 수집에 jsonP를 적용하는 방법에 대해 자세히 알아 보겠습니다.
1. JSONP 원칙
JSONP(JSON with padding)는 도메인 간 데이터 전송 방법이며, 스크립트 태그를 동적으로 추가하여 JSON 데이터를 가져옵니다. 프론트엔드에서 JSONP를 사용하는 원칙은 다음과 같습니다.
먼저 프론트엔드는 서버에 JSONP 요청을 시작하며, 요청 주소는 크로스 도메인 주소입니다. JSONP 요청의 URL에는 콜백 매개변수가 포함되어야 합니다. 백엔드는 이 매개변수를 기반으로 응답 JSON 데이터를 생성하고 이를 함수 호출 형식으로 프런트엔드에 반환합니다. 그런 다음 프런트엔드는 응답 데이터를 구문 분석하고 처리합니다.
구체적인 프로세스는 아래 그림과 같습니다.
2. 서버가 JSONP 요청에 응답합니다
현재 끝은 JSONP 요청을 시작하며 서버는 요청에 올바르게 응답해야 합니다. JSONP 요청의 경우 서버는 지정된 이름의 JavaScript 함수를 반환하고 함수가 호출될 때 서버에서 생성된 JSON 데이터를 호출해야 합니다. 다음은 JSONP 응답의 예입니다.
요약하자면 서버는 다음 사항을 구현해야 합니다.
3. JSONP 응답을 프런트엔드에서 처리
서버가 JSONP 요청에 올바르게 응답하면 프런트엔드에서 응답 데이터를 올바르게 처리해야 합니다. 프런트엔드에서 해야 할 일은 다음과 같습니다.
다음은 JSONP 처리 예시입니다.
마지막으로 주의할 점은 JSONP 요청 시 반환된 데이터에 JavaScript 문이 포함된 경우 응답 데이터가 JavaScript 형식으로 반환되기 때문입니다. , 이스케이프 처리가 필요합니다. 그렇지 않으면 프런트 엔드 코드 실행에 영향을 미칩니다. 일반적인 이스케이프 함수에는 jQuery의 $.parseJSON() 함수와 JavaScript의 JSON.parse() 함수가 포함됩니다.
계속...
위 내용은 php jsonp는 json 데이터를 변환합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!