[javascript] JSON과 JSONP의 차이점은 무엇입니까?

JAVASCRIPT / 글쓴이

현명하게, 파일 형식을 현명하고 실용적으로 사용합니까?

답변

JSONP는 패딩이있는 JSON입니다. 즉, 시작 부분에 문자열을 넣고 그 주위에 한 쌍의 괄호를 넣습니다. 예를 들면 다음과 같습니다.

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

결과적으로 JSON을 스크립트 파일로로드 할 수 있습니다. 이전에이라는 함수를 설정 func한 경우 해당 함수는 스크립트 파일로드가 완료되면 JSON 데이터 인 하나의 인수와 함께 호출됩니다. 이것은 일반적으로 JSON 데이터로 사이트 간 AJAX를 허용하는 데 사용됩니다. example.com이 위에 제공된 JSONP 예제와 유사한 JSON 파일을 제공한다는 것을 알고 있다면 example.com 도메인에없는 경우에도 이와 같은 코드를 사용하여 검색 할 수 있습니다.

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

답변

기본적으로 동일한 출처 정책으로 인해 AJAX를 통해 다른 도메인에서 JSON 데이터를 요청할 수 없습니다. AJAX를 사용하면 페이지가 이미로드 된 후 데이터를 가져온 다음 반환 된 코드를 호출하거나 함수를 호출 할 수 있습니다. AJAX는 사용할 수 없지만 <script>자체 페이지에 태그 를 삽입 할 수 있으며 다른 도메인에서 호스팅되는 스크립트를 참조 할 수 있습니다.

일반적으로 이것을 사용하여 jQuery 와 같은 CDN의 라이브러리를 포함 합니다. 그러나이를 악용하여 대신 데이터를 가져 오는 데 사용할 수 있습니다! JSON은 이미 유효한 JavaScript ( 대부분 )이지만 스크립트 / 데이터의로드가 완료된 시점을 알 방법이없고 액세스하지 않는 한 스크립트 파일에 JSON을 반환 할 수 없습니다. 변수에 할당되거나 함수에 전달됩니다. 따라서 우리가하는 일은 웹 서비스가 준비가되면 대신 함수를 호출하도록 지시하는 것입니다.

예를 들어, 증권 거래소 API에서 일부 데이터를 요청할 수 있으며 일반적인 API 매개 변수와 함께 콜백을 제공합니다 (예 🙂 ?callback=callThisWhenReady. 그런 다음 웹 서비스는 함수로 데이터를 래핑하고 다음과 같이 반환합니다 callThisWhenReady({...data...}). 이제 스크립트가로드 되 자마자 브라우저는 정상적으로 실행하려고 시도하는데, 이는 임의 함수를 호출하고 원하는 데이터를 제공합니다.

익명 함수를 호출하는 대신 이름 지정된 함수를 사용해야한다는 점을 제외하면 일반적인 AJAX 요청과 매우 유사합니다.

jQuery는 실제로 고유 한 이름의 함수를 생성하고 전달하여 원하는 코드를 실행함으로써 실제로이를 완벽하게 지원합니다.

답변

JSONP를 사용하면 JSON 객체에 전달되는 콜백 함수를 지정할 수 있습니다. 이를 통해 동일한 오리진 정책을 무시하고 외부 서버에서 웹 페이지의 JavaScript로 JSON을로드 할 수 있습니다.

답변

JSONP는 “JSON with Padding”의 약자이며 다른 도메인에서 데이터를로드하기위한 해결 방법입니다. 스크립트를 DOM 헤드에로드하므로 마치 자신의 도메인에로드 된 것처럼 정보에 액세스 할 수 있으므로 도메인 간 문제를 우회 할 수 있습니다.

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

이제 JSONP와 JSON 컨텐츠를 중심으로 생성 한 콜백 함수를 사용하여 AJAX를 통해 JSON을 요청할 수 있습니다. 출력은 JSON으로서 객체 여야하며, 우리는 제한없이 원하는 데이터를 사용할 수 있습니다.

답변

JSONP는 본질적으로 데이터를 감싸는 함수 호출과 같은 추가 코드가있는 JSON입니다. 구문 분석 중에 데이터가 작동 될 수 있습니다.

답변

JSON

JSON (JavaScript Object Notation) 은 특히 ​​대상이 JavaScript 응용 프로그램 인 경우 응용 프로그램간에 데이터를 전송하는 편리한 방법입니다.

예:

다음은 서버 응답의 전송으로 JSON을 사용하는 최소 예입니다. 클라이언트는 jQuery 속기 함수 $ .getJSON을 사용하여 Ajax 요청을합니다. 서버는 해시를 생성하여 JSON으로 형식화 한 후이를 클라이언트에 리턴합니다. 클라이언트는 이것을 포맷하고 페이지 요소에 넣습니다.

섬기는 사람:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

고객:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

산출:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (패딩이있는 JSON)

JSONP 는 클라이언트와 다른 도메인에서 JSON 응답을 보낼 때 브라우저 제한을 극복하는 간단한 방법입니다.

JSONP를 사용하는 클라이언트 측의 유일한 변경 사항은 URL에 콜백 매개 변수를 추가하는 것입니다.

섬기는 사람:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

고객:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

산출: 

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

링크 : http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

답변

“JSONP는 추가 코드가 포함 된 JSON입니다”는 실제 세계에서는 너무 쉽습니다. 아니요, 불일치가 거의 없습니다. 모든 것이 제대로 작동 한다면 프로그래밍의 재미는 무엇입니까 ?

알고 보니 JSON은 자바 스크립트의 부분 집합 아니다 . JSON 객체를 가져 와서 함수 호출로 래핑하면 언젠가 오늘처럼 이상한 구문 오류가 발생합니다.