[자바스크립트] JSONP에 대하여

[자바스크립트] JSONP에 대하여

1. JSONP 개념

• 한 웹페이지에서 도메인이 다른 웹페이지로 데이터를 요청할 때 사용하는 JAVASCRIPT 개발 방법론
• 동일출처 원칙(Same-origin policy)을 회피하는 일종의 편법으로 흔히 사용
• * 동일출처 원칙 : 기본적으로 웹 브라우저는 도메인이 다른 웹 페이지로는 Ajax 등의 방법으로 접근하지 못하게 제한

2. JSONP의 핵심

• <script> 요소를 사용
• * <script> 요소는 도메인이 다른 스크립트 파일이라 하더라도 Embed할 수 있기 때문에, 이 성질을 이용

3. JSONP의 작동원리

• 데이터를 요청할 페이지에 데이터를 받아 처리할 콜백 함수를 준비. 이 후 <script> 요소를 생성하여 데이터 요청을 진행
• 데이터 요청을 받은 페이지에서는 콜백 함수를 실행하는 스크립트를 출력. 이 때 콜백 함수의 인자에는 요청 받은 데이터가 들어감

4. JSONP vs AJAX 구조 및 차이점

[콜백 함수를 실행하는 타이밍이 다르다]

1. AJAX는 데이터만을 일단 responseText 속성으로 가져온 후, XMLHttpRequest 객체에서 Onreadystatechange 속성에 담긴 콜백 함수를 실행
2. JSONP는 서버 측에서 이미 콜백 함수를 실행하는 코드를 반환함

[JSONP의 한계]

1. <script> 요소를 사용하기 때문에 Type은 GET Method 만을 사용할 수 있다.
2. 통신실패 시 처리함수인 error 값을 사용할 수 없다.

5. JQuery에서 JSONP 사용하기

function JsonpTest()
{  
    var s = encodeURIComponent(document.getElementById('str').value);
     
    $.ajax({
        dataType: "jsonp",
        url: "http://myeonguni.tistory.com/jsonpTest.jsp",
        type: "GET",
        data: {'s':s},
        success: function(data){
            loadList(data);
        }
    });
  
    return false;
};

JQuery에서는 위 처럼 $.ajax() 스펙을 이용하여 평소에 AJAX를 구현하던 것과 동일한 모양으로 JSONP를 구현할 수 있다. 다만, dateType 값이 'jsonp'라는 것이 차이라고 할 수 있다.

앞서 [4. JSONP vs AJAX 구조 및 차이점]에서 말했듯이 JSONP는 Type 값을 무조건 GET method로 고정해야 한다. POST 등으로 설정할 경우, data 값에서 설정한 파라메터들이 실제로 전달되지 않아 정상적으로 작동하지 않는 경우가 있다.

6. 결론

AJAX와 동일한 효과를 가지면서도 동일출처 원칙을 회피할 수 있는 것. 이게 바로 JSONP가 가진 효용성이라고 할 수 있다.