jQuery를 사용하여 외부 도메인에서 JSONP(JSON with Padding) 요청을 보내는 방법에 대해 알아보겠습니다.

jQuery JSONP란?

JSONP는 브라우저의 Same-Origin Policy로 인해 외부 도메인에서 JSON 데이터를 가져올 때 발생하는 제약을 우회하기 위한 방법입니다. HTML <script> 요소를 이용하여 외부 도메인의 데이터를 가져오는 기법으로, JSON 데이터를 패딩(padding)하여 콜백 함수를 호출하는 방식으로 동작합니다.

jQuery에서 JSONP 요청하기

jQuery를 사용하여 JSONP 요청을 보내려면 $.ajax() 메서드를 사용하면 됩니다.

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

$.ajax({
  url: 'http://example.com/api/data.json',
  dataType: 'jsonp',
  success: function(data) {
    console.log('데이터를 성공적으로 가져왔습니다:', data);
  },
  error: function(xhr, status, error) {
    console.error('데이터를 가져오는데 실패했습니다:', error);
  }
});

url 속성에는 JSONP를 지원하는 외부 API의 엔드포인트 URL을 설정하고, dataType 속성을 'jsonp'로 지정하여 JSONP 요청을 보냅니다.

서버에서의 JSONP 응답 구성

외부 서버에서는 JSONP 요청에 대한 응답을 패딩된 JSON 형태로 보내야 합니다.

JSONP 응답은 다음과 유사한 형태를 가지고 있어야 합니다.

callbackFunctionName({ "key": "value" });

callbackFunctionName은 클라이언트에서 지정한 콜백 함수명입니다. 따라서 실제 서버 응답은 클라이언트에서 지정한 콜백 함수를 호출하면서 데이터를 전달하게 됩니다.

결론

jQuery를 사용하여 JSONP 요청을 보내면, 브라우저가 Same-Origin Policy로 인한 제약을 우회하고 외부 도메인에서 JSON 데이터를 안전하게 가져올 수 있습니다.