질문 : 누구든지 일반 용어로 JSONP가 무엇인지 설명 할 수 있습니까?
JSONP 는 패딩이있는 JSON 것을 알고 있습니다.
jQuery.getJSON() 과 함께 사용하는 방법을 이해합니다. 그러나 JSONP를 도입 할 때 callback 개념을 이해하지 못합니다.
누구든지 이것이 어떻게 작동하는지 설명 할 수 있습니까?
답변
이 답변은 6 년이 넘었습니다. JSONP의 개념과 적용은 변경되지 않았지만 (즉, 답변의 세부 정보가 여전히 유효 함), 가능한 경우 CORS를 사용해야합니다 (즉, 서버 또는 API 가이를 지원하고 브라우저 지원 이 적절 함). 내재 된 보안 위험이 있습니다 .
JSONP ( JSON with Padding )는 웹 브라우저에서 교차 도메인 정책을 우회하는 데 일반적으로 사용되는 방법입니다. (브라우저에서 다른 서버에있는 것으로 인식되는 웹 페이지에 AJAX 요청을 할 수 없습니다.)
JSON과 JSONP는 클라이언트와 서버에서 다르게 작동합니다. XMLHTTPRequest 및 관련 브라우저 메서드를 사용하여 전달되지 않습니다. 대신 소스가 대상 URL로 설정된 <script> 그런 다음이 스크립트 태그가 DOM에 추가됩니다 (일반적으로 <head> 요소 내부).
JSON Request:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();JSONP Request:
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
JSON 응답과 JSONP 응답의 차이점은 JSONP 응답 개체가 콜백 함수에 인수로 전달된다는 것입니다.
JSON:
{ "bar": "baz" }
JSONP:
foo( { "bar": "baz" } );
callback 매개 변수가 포함 된 JSONP 요청이 표시되는 이유입니다. 따라서 서버는 응답을 래핑 할 함수의 이름을 알 수 있습니다.
이 함수는 브라우저에서 <script> 태그를 평가할 때 (요청이 완료된 후) 전역 범위 에 있어야합니다.
JSON 응답 처리와 JSONP 응답 사이에서 알아야 할 또 다른 차이점은 try / catch 문에서 responseText를 평가하려는 시도를 래핑하여 JSON 응답의 구문 분석 오류를 포착 할 수 있다는 것입니다. JSONP 응답의 특성으로 인해 응답의 구문 분석 오류로 인해 포착 할 수없는 JavaScript 구문 분석 오류가 발생합니다.
두 형식 모두 요청을 시작하기 전에 시간 초과를 설정하고 응답 핸들러에서 시간 초과를 지워 시간 초과 오류를 구현할 수 있습니다.
jQuery 사용
jQuery 를 사용하여 JSONP 요청을 할 때의 유용성은 jQuery가 백그라운드에서 모든 작업을 수행한다는 것입니다.
기본적으로 jQuery를 사용하려면 &callback=? AJAX 요청의 URL에서. jQuery는 success 함수를 가져 와서 고유 한 이름을 할당하고 전역 범위에 게시합니다. 그런 다음 물음표를 대체 ? &callback=? 할당 한 이름으로.
비교 JSON/JSONP 구현
다음은 응답 객체 { "bar" : "baz" }
JSON:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();JSONP:
function foo(response) {
document.getElementById("output").innerHTML = response.bar;
};
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);출처 : https://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms
'개발관련 > other' 카테고리의 다른 글
| 스위프트 문자열의 길이 가져 오기 (0) | 2021.11.08 |
|---|---|
| node.js 로 간단한 웹 서버 만들기 (0) | 2021.11.08 |
| Visual Studio에서 두 파일 비교할 수 있는 방법 (0) | 2021.11.05 |
| Vim에 설치된 모든 색 구성표 목록을 얻는 방법 (0) | 2021.11.05 |
| Django에서 "slug"의 역할 (0) | 2021.11.05 |