외부 라이브러리 없이 JavaScript에서 JSONP 요청 만들기

JavaScript에서 도메인 간 JSONP 요청의 경우 jQuery와 같은 외부 라이브러리가 항상 필요한 것은 아닙니다. 다음은 순수 JavaScript를 사용하여 이를 달성하는 방법에 대한 가이드입니다.

1단계: 콜백 함수 생성

JSONP 응답을 수신하고 처리하는 콜백 함수를 정의하는 것으로 시작합니다. 제공된 예에서 foo 함수는 다음 작업을 수행합니다.

function foo(data) {
  // Do something with the JSON response here
}

2단계: 스크립트 요소를 동적으로 생성

다음으로

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';

3단계: DOM에 스크립트 요소 추가

document.getElementsByTagName('head')[0].appendChild(script);

최신 브라우저의 경우 이 줄을 다음과 같이 단순화할 수 있습니다.

document.head.appendChild(script);

예

이러한 단계를 종합하여 외부 라이브러리 없이 JavaScript로 JSONP 요청을 작성하는 완전한 예는 다음과 같습니다. :

function foo(data) {
  // Do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.head.appendChild(script);