누구나 평신도 용어로 JSONP가 무엇인지 설명 할 수 있습니까? [복제]
이 질문에는 이미 답변이 있습니다.
- JSONP 란 무엇이며 왜 만들어 졌습니까? 답변 9 개
나는 패딩 JSONP이 있다는 것을 안다 JSON.
JSON이 무엇인지, 어떻게 사용하는지 이해합니다 jQuery.getJSON(). 그러나 callbackJSONP를 도입 할 때 의 개념을 이해하지 못합니다 .
아무도 이것이 어떻게 작동하는지 설명 할 수 있습니까?
머리말:
이 답변은 6 세 이상입니다. JSONP의 개념과 응용 프로그램은 변경되지 않았지만 (예 : 답변 세부 정보가 여전히 유효 함) 가능한 경우 CORS를 사용하는 것이 좋습니다 (예 : 서버 또는 API에서 지원하며 브라우저 지원 이 적절한 경우). 고유 한 보안 위험이 있습니다 .
JSONP ( JSON with Padding )는 웹 브라우저에서 도메인 간 정책을 우회하는 데 일반적으로 사용되는 방법입니다. (브라우저가 다른 서버에 있다고 인식 한 웹 페이지에 대한 AJAX 요청을 할 수 없습니다.)
JSON과 JSONP는 클라이언트와 서버에서 다르게 작동합니다. JSONP 요청은 XMLHTTPRequest및 관련 브라우저 메소드를 사용하여 전달되지 않습니다 . 대신 <script>소스가 대상 URL로 설정된 태그가 생성됩니다. 그런 다음이 스크립트 태그가 DOM (일반적으로 <head>요소 내부 )에 추가됩니다.
JSON 요청 :
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP 요청 :
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);
다음과 같은 JSON 데이터를 제공하는 URL이 있다고 가정 해보십시오.
{'field': 'value'}
... 그리고 당신은 콜백 함수 이름 'myCallback'을 전달한 JSONP를 사용하는 것을 제외하고 비슷한 URL을 가지고 있습니다 (보통 'callback'이라는 쿼리 매개 변수를 제공함으로써 수행됩니다 http://example.com/dataSource?callback=myCallback). 그런 다음 반환됩니다.
myCallback({'field':'value'})
... 단지 객체가 아니라 실제로 실행할 수있는 코드입니다. 따라서 페이지의 다른 곳에 함수를 정의 myFunction하고이 스크립트를 실행하면 URL의 데이터 로 함수 가 호출됩니다.
이것에 대한 멋진 점은 스크립트 태그를 만들고 URL을 callback매개 변수로 완성 하여 src속성으로 사용하면 브라우저가 해당 태그 를 실행한다는 것입니다. 즉, 브라우저에서 페이지 도메인 이외의 소스에서 스크립트 태그를 실행할 수 있기 때문에 '동일 출처'보안 정책을 해결할 수 있습니다.
이것은 jQuery가 ajax 요청을 할 때 수행하는 것 .ajax입니다 ( 'jsonp'를 dataType속성 값으로 사용 ). 예 :
$.ajax({
url: 'http://example.com/datasource',
dataType: 'jsonp',
success: function(data) {
// your code to handle data here
}
});
여기서 jQuery는 콜백 함수 이름과 쿼리 매개 변수를 처리하여 API를 다른 ajax 호출과 동일하게 만듭니다. 그러나 다른 유형의 아약스 요청과 달리 언급 한 바와 같이 페이지와 동일한 출처에서 데이터를 가져 오는 것으로 제한되지 않습니다.
JSONP는 브라우저의 동일한 출처 정책을 해결하는 방법입니다 . 어떻게? 이처럼 :
목표는 여기에 요청하는 것입니다 otherdomain.com및 alert응답의 이름입니다. 일반적으로 AJAX 요청은 다음과 같습니다.
$.get('otherdomain.com', function (response) {
var name = response.name;
alert(name);
});
그러나 요청이 다른 도메인으로 나가므로 작동하지 않습니다.
<script>그래도 태그를 사용하여 요청할 수 있습니다 . 모두 <script src="otherdomain.com"></script>와 $.get('otherdomain.com')같은 요청이 이루어지고 발생합니다 :
GET otherdomain.com
Q :하지만 <script>태그를 사용하면 어떻게 응답에 액세스 할 수 있습니까? 원하는 경우 액세스해야 alert합니다.
A : 어, 우리는 할 수 없습니다. 그러나 여기 우리가 할 수있는 일이 있습니다-응답을 사용하는 함수를 정의한 다음 서버가 응답을 인수로하여 함수를 호출하는 JavaScript로 응답하도록 지시하십시오.
Q : 그러나 서버가이 작업을 수행하지 않고 JSON 만 반환 할 경우 어떻게해야합니까?
A : 그런 다음에는 사용할 수 없습니다. JSONP는 서버가 협력해야합니다.
Q : <script>태그 를 사용하지 않아도됩니다.
A : jQuery와 같은 라이브러리가 더 좋습니다. 전의:
$.ajax({
url: "http://otherdomain.com",
jsonp: "callback",
dataType: "jsonp",
success: function( response ) {
console.log( response );
}
});
<script>태그 DOM 요소 를 동적으로 생성하여 작동합니다 .
Q : <script>태그는 GET 요청 만합니다. POST 요청을하려면 어떻게해야합니까?
A: Then JSONP won't work for us.
Q: That's ok, I just want to make a GET request. JSONP is awesome and I'm going to go use it - thanks!
A: Actually, it isn't that awesome. It's really just a hack. And it isn't the safest thing to use. Now that CORS is available, you should use it whenever possible.
I have found a useful article that also explains the topic quite clearly and easy language. Link is JSONP
Some of the worth noting points are:
- JSONP pre-dates CORS.
- It is a pseudo-standard way to retreive data from a different domain,
- It has limited CORS features (only GET method)
Working is as follows:
<script src="url?callback=function_name">is included in the html code- When step 1 gets executed it sens a function with the same function name (as given in the url parameter) as a response.
- 주어진 이름의 함수가 코드에 존재하면, 해당 함수에 대한 인수로 리턴 된 데이터가있는 경우 해당 함수와 함께 실행됩니다.
참고 URL : https://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms
'Programming' 카테고리의 다른 글
| const 배열 선언 (0) | 2020.02.20 |
|---|---|
| CSS overflow-x : 표시; (0) | 2020.02.20 |
| C #으로 JSON을 구문 분석하려면 어떻게해야합니까? (0) | 2020.02.20 |
| 특정 필드에서 중복을 찾으려면 명령문을 선택하십시오. (0) | 2020.02.20 |
| objective-c / cocoa에서 예외 발생 (0) | 2020.02.20 |