한국어

EDPS

JSON과 JSONP 차이점

조회 수 653 추천 수 0 2017.03.29 14:43:47

jsonp 는 cross-domain 을 위해 탄생? 

 

json

{'home' : '대전', 'author':'park'};

 

jsonp

callback({'home' : '대전', 'author' : 'park'})

 

 

외부 도메인으로 Ajax 요청을 할때는 jsonp 를 사용해야한다.

 

가장 큰 차이점은 callback 함수명이다.

 

 

 

예제 1)

 

$.ajax({
   
   type: "GET",
   async: "false",
   url: "http://{server_ip}/jsp/domain/registrationInfo/jsonp.jsp",
   dataType: "jsonp",
   data: { },
   callback : "list" ,
   success : function(data) {
         $(data.addr).each(function(key, val){
              alert(val.apt); 
         });
   },
   error : function(){
          alert("Fail");
   }


});

 

 

이렇게 Ajax 요청을 보내면

callback 파라미터가 무작위 생성되어 같이 보내진다.

받는 쪽에서 callback 파라미터 값을 받아 json 데이터 앞에 명시해 주어 응답해야 한다.

 

<%
 System.out.println("jsonp test");
 String callback = request.getParameter("callback");
 System.out.println("calback::" + callback);
%>
<%=callback%>({"people" : [{"home": "대전", "author" : "park"} ],
"addr" : [{"apt" : "uneed apt", "floors" : 11 }] })

 

 

이것을 제외하면 json 과 똑같다.

 


WindBoy

2017.03.29 14:53:44
*.160.209.159

Q>
JSON과 JSONP의 차이점은 무엇인가요?

 

A>
JSONP는 JSON에 패딩(padding)을 더한 것입니다. 즉, 앞쪽에 문자열(함수명처럼 사용)을 둔 후 원래 JSON 데이터를 괄호( )로 둘러쌓는 형태가 됩니다. 예로 들면,

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

 
결과적으로 JSON을 스크립트처럼 부를 수 있게 됩니다. 위의 예에서처럼 JSONP를 정의해두고 만약 func를 호출하는 함수를 만들어두었다면 JSON 데이터를 하나의 인자로 부를 수 있게 됩니다. JSONP는 주로 크로스 사이트에서 ajax로 JSON 데이터를 전송할 수 있도록 하는데 사용됩니다.

  

기본적으로 CORS(cross-origin resource sharing) 정책에 의해 도메인이 다른 사이트에 JSON 데이터를 요청할 수 없습니다. 여기서 ajax는 페이지의 로딩이 다 끝난 후에 리턴되는 특정 스크립트를 실행할 수 있는데(콜백), 이 콜백 함수에 JSON 데이터를 담아 로딩이 끝난 후 콜백 함수를 호출하여 마치 같은 도메인에서 데이터를 불러 온 것처럼 이 데이터를 부를 수 있도록 해줍니다.

 

예로 들어 한 API에 데이터를 요청을 할 때, 파라미터로 ‘callThisWhenReady’ 같은 콜백함수를 지정하게 됩니다. API를 제공하는 웹서비스에서는 요청한 json데이터를 콜백함수로 감싸 callThisWhenReady({…data…}) 처럼 리턴하고, 브라우저는 로딩이 끝나면 이 콜백함수를 정상적으로(as normal) 실행하여 요청했던 데이터를 받게 됩니다.

 

stackoverflow 번역 및 정리 원문 클릭

List of Articles
번호 제목 글쓴이 날짜 조회 수
397 직급별 영어명칭 [1] 수텐리 2019-06-04 20
396 PV, UV란 수텐리 2018-08-28 70
395 HTML Error Code 수텐리 2018-08-28 65
394 QA=테스트라는 잘못된 인식이 불러온 오해 (2) 수텐리 2018-08-14 30
393 QA=테스트라는 잘못된 인식이 불러온 오해 (1) 수텐리 2018-08-14 36
392 버전(Version)을 제대로 이해하기 수텐리 2018-07-30 17
391 MSSQL에서 SELECT 시에 WITH (NOLOCK) 수텐리 2018-07-20 73
390 노트북 배터리 성능 테스트 WindBoy 2018-06-26 169
389 Random number와 가중치를 고려한 추첨기능 구현하기 file [1] WindBoy 2018-06-05 302
388 개발 표준 정의서 [1] 수텐리 2018-04-20 847
387 푸른세상티엔에스 WindBoy 2017-09-27 71
386 Linux 명령어 관리 WindBoy 2017-08-24 166
» JSON과 JSONP 차이점 [1] WindBoy 2017-03-29 653
384 XP에서 ie8 res://ieframe.dll/acr_error.htm 오류 file WindBoy 2016-08-26 101
383 HP Officejet Pro 8610 한글화 작업 WindBoy 2016-06-01 1376
382 excel TIP WindBoy 2016-05-10 23
381 PC의 공인인증서 위치 admin 2016-03-14 247
380 마케팅 자료 WindBoy 2015-12-05 26
379 차근차근 제대로 배워보는 인터넷 쇼핑몰 창업 WindBoy 2015-10-25 39
378 쇼핑몰 통신판매업신고 WindBoy 2015-10-25 42