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

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

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 & 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 객체를 가져 와서 함수 호출로 래핑하면 언젠가 오늘처럼 이상한 구문 오류가 발생합니다.

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

그러나이 접근 방식의 실제 구현에는 종종 명확하게 설명되지 않은 미묘한 차이가 포함됩니다.

다음은 JSON과 JSONP를 나란히 보여주는 간단한 자습서입니다.

모든 코드는 Github에서 무료로 제공되며 라이브 버전은 http://json-jsonp-tutorial.craic.com 에서 확인할 수 있습니다.