일반인 용어로 JSONP가 무엇인지 설명할 수 있는 사람이 있습니까?
알고있어요JSONP이라JSON패딩으로
JSON이 무엇인지, 어떻게 사용하는지 잘 알고 있습니다.하지만, 저는 그 개념을 이해하지 못합니다.callbackJSONP를 소개할 때.
누가 이것이 어떻게 작동하는지 설명해 줄 수 있습니까?
서문:
이 대답은 6년이 넘었습니다.JSONP의 개념과 응용 프로그램은 변경되지 않았지만(즉, 답변의 세부 정보는 여전히 유효함) JSONP에는 고유한 보안 위험이 있으므로 가능한 경우(즉, 서버 또는 API가 지원하고 브라우저 지원이 적절함) CORS를 사용하는 것을 고려해야 합니다.
JSONP(JSON with Padding)는 웹 브라우저에서 교차 도메인 정책을 우회하는 데 일반적으로 사용되는 방법입니다. (브라우저에서 다른 서버에 있는 것으로 인식되는 웹 페이지에 AJAX 요청을 할 수 없습니다.)
JSON과 JSONP는 클라이언트와 서버에서 다르게 작동합니다.JSONP 요청은 다음을 사용하여 발송되지 않습니다.XMLHTTPRequest및 연관된 브라우저 방법을 참조하십시오.에 신에대.<script>태그가 생성되고 태그의 소스가 대상 URL로 설정됩니다.이 스크립트 DOM(으로 "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서버가 응답을 래핑할 함수의 이름을 알 수 있도록 매개 변수를 지정합니다.
이 기능은 다음 시간에 글로벌 범위에 존재해야 합니다.<script>요청이 완료되면 브라우저에서 태그를 평가합니다.
JSON 응답 처리와 JSONP 응답 처리 사이의 또 다른 차이점은 응답 텍스트를 try/catch 문으로 평가하는 시도를 래핑하여 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'}
... 함수 이름 한 JSONP를 으로 ' 변수를 그리고 콜백 함수 이름 'myCallback'을 전달한 JSONP를 제외하고는 유사한 URL을 사용했습니다(일반적으로 'callback'이라는 쿼리 매개 변수를 지정하여 수행됨).http://example.com/dataSource?callback=myCallback그러면 다음과 같이 반환됩니다.
myCallback({'field':'value'})
할 수 이것은 단순한 객체가 아니라 실제로 실행할 수 있는 코드입니다. 만약 곳에서 그서만당당페신이정라고 불리는 한다면,myFunction됩니다.
태그를 할 수 with 이의멋을점진스태만그 URL들다것입니있는다수용것할사고를은트크립▁with▁thecomplete다것▁(을입니▁your:▁and▁create▁url이▁you▁cool▁tag▁is▁about▁thing것▁this▁use▁a▁can▁script는다있수의용할).callbackparameter를 사용합니다.src속성을 사용하면 브라우저에서 브라우저가 속성을 실행합니다.즉, 브라우저를 통해 페이지 도메인이 아닌 다른 소스에서 스크립트 태그를 실행할 수 있으므로 '동일 출처' 보안 정책을 사용할 수 있습니다.
이것은 jQuery가 Ajax 요청을 할 때 수행하는 작업입니다('jsonp'와 함께 사용).dataType재산).예.
$.ajax({
url: 'http://example.com/datasource',
dataType: 'jsonp',
success: function(data) {
// your code to handle data here
}
});
여기서 jQuery는 콜백 함수 이름과 쿼리 매개 변수를 처리하여 API를 다른 Ajax 호출과 동일하게 만듭니다.그러나 다른 유형의 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을 돌려주지 않고, JSON만 돌려준다면 어떨까요?
A: 그러면 우리는 그것을 사용할 수 없을 거예요.JSONP는 서버에 협조를 요청합니다.
해야 하는 것: Q를 사용해야 합니다.<script>태그가 못생겼습니다.
A: jQuery와 같은 도서관들은 그것을 더 좋게 만듭니다.예:
$.ajax({
url: "http://otherdomain.com",
jsonp: "callback",
dataType: "jsonp",
success: function( response ) {
console.log( response );
}
});
동적으로 생성함으로써 작동합니다.<script>태그 DOM 요소.
질문:<script>태그는 GET 요청만 합니다. POST 요청을 하려면 어떻게 해야 합니까?
A: 그럼 JSONP는 우리한테 안 먹히겠네요.
Q: 괜찮습니다, 그냥 GET 요청을 하고 싶습니다.JSONP는 훌륭하고 나는 그것을 사용하러 갈 것입니다 - 감사합니다!
A: 사실, 그렇게 멋지지는 않아요.정말로 해킹일 뿐입니다.그리고 그것은 가장 안전하게 사용할 수 있는 것은 아닙니다.이제 CORS를 사용할 수 있으므로 가능하면 언제든지 사용해야 합니다.
저는 주제를 꽤 명확하고 쉬운 언어로 설명하는 유용한 기사를 찾았습니다.링크는 JSONP입니다.
주목할 가치가 있는 몇 가지 사항은 다음과 같습니다.
- JSONP는 CORS보다 먼저 날짜를 지정합니다.
- 다른 도메인에서 데이터를 검색하는 유사 표준 방법입니다.
- 제한된 CORS 기능을 가지고 있습니다(GET 방식만 해당).
작업은 다음과 같습니다.
<script src="url?callback=function_name">코드html에 되어 있습니다.- 1단계가 실행되면 (url 매개 변수에 지정된 것처럼) 동일한 함수 이름을 가진 함수를 응답으로 감지합니다.
- 지정된 이름을 가진 함수가 코드에 있으면 해당 함수에 대한 인수로 반환되는 데이터로 실행됩니다.
언급URL : https://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms
'sourcecode' 카테고리의 다른 글
| Excel 셀의 여러 줄 텍스트 (0) | 2023.05.13 |
|---|---|
| sed를 사용하여 문자열에서 텍스트를 추출하는 방법은 무엇입니까? (0) | 2023.05.13 |
| Thread에서 ThreadStart 메서드에 매개 변수를 전달하는 방법은 무엇입니까? (0) | 2023.05.08 |
| 시작 화면 스토리보드가 이미지를 표시하지 않음 (0) | 2023.05.08 |
| SDK iOS 8.0의 제품 유형 Unit Test Bundle에 대한 코드 서명 필요 (0) | 2023.05.08 |