이 문서는 자바스크립트를 사용하여 외부 API(구 다음 Daum Open API)에서 데이터를 가져오는 JSONP(JSON with Padding) 기법을 설명합니다. `script` 태그의 `src` 속성에 API URL을 동적으로 삽입하여 크로스 도메인 데이터 요청을 수행하고, 응답 데이터를 처리하기 위한 콜백 함수(`callbackfn`)를 정의하는 과정을 단계별로 보여줍니다.
6 min read
Simple Ajax 예제
Source
Evernote/IFTTT Feedly/Simple Ajax 예제.md
Summary
이 문서는 자바스크립트를 사용하여 외부 API(구 다음 Daum Open API)에서 데이터를 가져오는 JSONP(JSON with Padding) 기법을 설명합니다. script 태그의 src 속성에 API URL을 동적으로 삽입하여 크로스 도메인 데이터 요청을 수행하고, 응답 데이터를 처리하기 위한 콜백 함수(callbackfn)를 정의하는 과정을 단계별로 보여줍니다.
Key Points
JSONP는 브라우저의 동일 출처 정책(CORS)을 우회하여 다른 도메인에서 데이터를 가져오는 전통적인 방법입니다.
API 호출 시 callback 파라미터에 정의한 함수 이름을 전달하면, 서버가 해당 함수 호출 형식으로 데이터를 감싸서 반환합니다.
자바스크립트로 script 요소를 생성하고 src에 API URL을 설정한 후 head 태그에 추가하면, 스크립트 실행과 동시에 콜백 함수가 자동으로 호출됩니다.
사용된 예제 API(apis.daum.net)는 현재 비활성화되었을 가능성이 높으며, 현대적인 웹 개발에서는 fetch API 또는 XMLHttpRequest를 통한 CORS 지원 방식을 권장합니다.