순수 자바스크립트로 JSONP 구현하는 방법

JSONP는 위대한 꼼수 중 하나이다!

결국 핵심은

서버에서 리턴한 내용을

js 파일로 착각하게 만들어서

이를 인클루드한 뒤

자동으로 실행시키는 구조라고 할 수 있다!(그래서 ajax처럼 동작하는 효과를 누릴 수 있다!)


JSONP는 jQuery를 이용해서 구현할 수 있지만

순수 자바스트립트로도 간단하게 만들 수 있다.

참고를 위해 소스를 올린다!



function foo(data) {
// 실행할 함수
}

var script = document.createElement('script'); // 임의의 <script></script> 태그를 만든다.

script.src = 'http://example.co.kr/jsonp_test.jsp?callback=foo'; // 서버에서 리턴한 내용을 js 파일로 착각하게 만든다!

document.getElementsByTagName('head')[0].appendChild(script); // 혹은 document.querySelector('head').appendChild(script); 등으로 처리해도 무방, 우리가 만든 script 태그를 head에 삽입한다!