jQuery는 웹 개발을 더욱 간단하게 만들어주는 매우 강력한 라이브러리입니다. 이 라이브러리는 ajax() 메서드를 통해 비동기식 HTTP 요청을 처리하는 데 유용하며, 요청한 데이터를 JSON 형식으로 받아오는 데 사용됩니다.

jQuery의 getJSON() 메서드

getJSON() 메서드는 jQuery에서 제공하는 함수로, 서버에서 JSON 데이터를 가져오는 데 사용됩니다. 주어진 URL에서 JSON 데이터를 가져와서 콜백 함수를 호출합니다.

예시:

$.getJSON("url", function(data) {
  // JSON 데이터 처리
});

JSONP

JSONP(JSON with Padding)는 웹 페이지에서 다른 도메인의 데이터를 요청할 때 생기는 same-origin policy 제약을 우회하는 방법 중 하나입니다.

JSONP는 <script> 태그를 이용하여 외부 도메인에서 JSON 데이터를 요청하고, 이에 대한 콜백을 처리하는 방법을 제공합니다.

예시:

function processJSONP(data) {
  // JSONP 데이터 처리
}
var script = document.createElement('script');
script.src = 'url?callback=processJSONP';
document.body.appendChild(script);

차이점

1. 요청 방식:
   • getJSON()은 AJAX 요청을 사용하며, 서버로부터 JSON 데이터를 비동기적으로 가져옵니다.
   • JSONP는 <script> 태그를 사용하여 외부 도메인의 데이터를 동적으로 가져옵니다.
2. Cross-domain 요청:
   • getJSON()은 동일 출처 정책에 따라 cross-domain 요청이 금지됩니다.
   • JSONP는 외부 도메인에서 데이터를 가져오는 데 사용됩니다.
3. 보안 문제:
   • getJSON()은 서버에서 JSON 데이터를 가져와서 동일한 도메인의 스크립트에 응답하는 데 사용됩니다.
   • JSONP는 동적으로 생성된 <script> 태그를 통해 외부 도메인의 데이터를 받아오므로 보안 상의 문제가 있습니다.

결론

getJSON() 메서드와 JSONP는 모두 JSON 데이터를 가져오는 데 사용되지만, 서로 다른 목적과 요청 방식을 가지고 있습니다. 개발자는 요구 사항에 맞게 적절한 방법을 선택하여야 합니다.

참고 자료:

• jQuery 공식 문서: jQuery.getJSON()
• MDN 웹 문서: JSONP