웹 페이지에서 서로 다른 도메인으로부터 데이터를 가져오는 것은 일반적으로 Same-Origin Policy로 제한됩니다. 그러나 JSONP(JSON with Padding)는 이를 우회하는 방법으로, 외부 도메인에서 데이터를 요청하고 수신할 수 있는 강력한 도구입니다. 이 포스트에서는 jQuery를 사용하여 JSONP 요청을 하는 방법을 안내합니다.

1. jQuery JSONP 메서드

jQuery에서 JSONP 요청을 보내려면 .ajax() 메서드를 사용할 수 있습니다. 이 메서드는 dataType: 'jsonp' 속성을 설정하여 JSONP 요청을 보낼 수 있습니다.

다음은 jQuery를 사용하여 JSONP 요청을 보내는 간단한 예제 코드입니다.

$.ajax({
  url: 'https://example.com/api/data',
  dataType: 'jsonp',
  success: function(data) {
    // 성공적으로 데이터를 받아왔을 때 실행할 코드
  },
  error: function() {
    // 오류가 발생했을 때 실행할 코드
  }
});

2. JSONP 요청 파라미터

JSONP 요청을 보낼 때는 추가적인 매개변수를 URL에 포함해야 합니다. 일반적으로는 콜백 함수의 이름을 지정하여 서버에 전달합니다.

예를 들어, 서버가 callback 매개변수를 취하는 경우, jQuery는 자동으로 이 매개변수를 생성하고 사용합니다.

$.ajax({
  url: 'https://example.com/api/data?callback=?',
  dataType: 'jsonp',
  success: function(data) {
    // 성공적으로 데이터를 받아왔을 때 실행할 코드
  },
  error: function() {
    // 오류가 발생했을 때 실행할 코드
  }
});

3. 외부 데이터 요청 예제

이제 여러분은 jQuery를 사용하여 JSONP를 이용해 외부 데이터를 요청하고 성공적으로 수신하는 방법을 알게 되었습니다. 다음은 이 요청을 이용하여 Flickr의 공개 이미지 검색 API에서 데이터를 가져오는 예제 코드입니다.

$.ajax({
  url: 'https://api.flickr.com/services/feeds/photos_public.gne?format=json',
  dataType: 'jsonp',
  jsonp: 'jsoncallback',
  success: function(data) {
    // 성공적으로 데이터를 받아왔을 때 실행할 코드
  },
  error: function() {
    // 오류가 발생했을 때 실행할 코드
  }
});

4. 마치며

JSONP를 사용하여 외부 데이터를 요청하는 것은 웹 개발에서 흔히 하는 작업 중 하나입니다. jQuery를 사용하여 JSONP 요청을 간편하게 보내고 받는 방법을 익히면, 다른 도메인으로부터 데이터를 가져와 웹 애플리케이션을 더 다양하게 확장할 수 있습니다.

항상 보안상의 이슈와 신뢰할 수 있는 소스에서만 JSONP 요청을 보내도록 주의하세요.

[부가문정보] https://api.jquery.com/jquery.getjson/