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

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

포맷, 파일 형식, 실용성을 중시합니까?

JSONP는 패딩이 있는 JSON입니다.즉, 선두에 스트링을 붙이고 그 주위에 괄호를 두릅니다.예를 들어 다음과 같습니다.

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

JSON이라고 합니다. 해 둔 func스크립트 파일 로드가 완료되면 JSON 데이터라는 인수를 사용하여 해당 함수가 호출됩니다.이것은 보통 JSON 데이터를 사용하는 교차 사이트 AJAX에 사용할 수 있도록 하기 위해 사용됩니다.com 가 의 와 같은 JSON 것을 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」, 「API」, 「API」, 「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 속기 함수 $.getJ를 사용하여 Ajax 요청을 작성합니다.SON. 서버가 해시를 생성하고 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
}

'JSONP is JSON with extra code'는 현실에서 너무 쉬울 것 같아요.아니, 약간의 차이가 있을 거야모든 것이 제대로 작동한다면 프로그래밍의 재미는 무엇입니까?

JSON은 JavaScript의 서브셋이 아닌 것으로 판명되었습니다.JSON 오브젝트를 취해서 함수 호출로 랩하는 것밖에 하지 않으면 언젠가 오늘처럼 이상한 구문 오류가 발생할 것입니다.

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

그러나 접근방식의 실질적인 구현에는 종종 명확하게 설명되지 않는 미묘한 차이가 수반된다.

다음은 JSON과 JSONP를 나란히 보여주는 간단한 튜토리얼입니다.

모든 코드는 Github에서 무료로 구할 수 있으며 라이브 버전은 http://json-jsonp-tutorial.craic.com에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/2887209/what-are-the-differences-between-json-and-jsonp