[jQuery] JSONP를 이용한 코드 예시

22 Dec 2023

jQuery

이 예시에서는 jQuery를 사용하여 JSONP를 이용하여 외부 도메인에 있는 데이터를 로드하는 방법을 보여줍니다.

1. JSONP란?

JSONP는 JSON with Padding의 약자로, 크로스 도메인 요청(Cross-Domain Request)을 지원하기 위한 메커니즘입니다. JSONP는 <script> 태그를 사용하여 다른 도메인에 있는 데이터를 로드할 수 있는 방법을 제공합니다.

2. 코드 예시

다음은 JSONP를 이용한 jQuery 코드 예시입니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JSONP Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Weather Information</h2>
  <div id="weather-info"></div>
</body>
</html>

JavaScript (jQuery)

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: 'https://external-api.com/weather',
    dataType: 'jsonp',
    success: function(data) {
      $('#weather-info').html('Current temperature: ' + data.temperature);
    }
  });
});

위의 코드에서 url 속성에는 외부 API의 엔드포인트가 들어가며, dataType 속성에 jsonp를 지정하여 JSONP 요청을 보내고 있습니다.

일반적으로 JSONP 요청을 보낼 때, 외부 API 엔드포인트에서 지원하는 콜백 함수 이름을 지정해야 합니다. JSONP 응답의 형태는 다음과 같습니다.

callbackFunctionName({ "temperature": 25 });

이 경우, callbackFunctionName은 서버에서 정의된 이름일 수 있으며, 받은 데이터를 처리할 수 있도록 페이지에 정의된 JavaScript 함수여야 합니다.

3. 요약

이렇게 jQuery를 활용하여 JSONP를 이용하여 외부 도메인에 있는 데이터를 로드하는 방법을 살펴보았습니다. JSONP를 사용하면 동일 출처 정책(Same-Origin Policy)을 우회하여 외부 도메인의 데이터를 가져올 수 있습니다.

더 많은 정보는 jQuery 공식 문서에서 확인할 수 있습니다.