JSONP 요청 예시

JSONP 요청을 보내기 위해, 보통 $.ajax 메소드를 사용합니다. JSONP 요청을 보내는 방법은 다음과 같습니다.

$.ajax({
  url: 'http://example.com/data',
  dataType: 'jsonp',
  success: function(data) {
    console.log('데이터를 성공적으로 가져왔습니다:', data);
  }
});

위의 예시에서 url은 요청을 보낼 대상의 URL이고, dataType은 ‘jsonp’로 설정하여 JSONP 요청임을 명시합니다. JSONP 요청은 페이지에 <script> 태그를 동적으로 추가함으로써 작동하며, 이것이 ‘padding’의 개념입니다. 요청한 데이터가 JavaScript 함수 호출의 형태로 감싸져있으면, 그 데이터를 JSONP로 처리합니다.

JSONP 요청 처리 과정

1. 브라우저는 JSONP 요청 URL을 만들고, 해당 URL을 통해 데이터를 요청합니다.
2. 서버는 요청된 데이터를 JSONP 형태로 감싸서 응답합니다. 일반적으로 이것은 콜백 함수 호출의 형태로 감싸져 있습니다.
3. 브라우저는 응답된 스크립트를 실행하고, 콜백 함수에 데이터를 전달하여 처리합니다.
4. 데이터를 콜백 함수에서 처리한 후, 필요에 따라 화면에 표시하거나 다른 작업을 수행합니다.

이처럼 JSONP 요청과 응답 과정을 통해, 다른 도메인에 있는 데이터를 브라우저에서 가져와서 처리할 수 있습니다.