JSONP의 기능 및 예제

JSONP란 무엇인가?

JSONP(JSON With Padding)란 웹에서 자바스크립트로 통신하기 위한 기술이다. 

일반적인 통신방법 특징인 SOP(Same Origin Policy) 제약 조건 때문에 다른 도메인과의 통신이 불가능하지만 

JSONP를 이용하면 가능하다고 한다. 

먼저 SOP(Same Origin Policy)의 개념이 명확하지 않은 경우 아래를 참고하면 좋을 듯 한다. 

* SOP(Same Origin Policy)란 

brower-side programming 언어에서는 보안상의 이유로 스크립트가 실행되는 페이지와 

다른 도메인 (protocol[http/https], HOST[x.x.x.x], port[:y]가 모두 같아야 한다)의 페이지를 참조할 수 없게 하는 정책을 가지고 있다. 

(참고URL:http://charlie0301.blogspot.kr/2013/12/jquery-ajax-same-origin-policy-jsonp.html)

1. JSONP의 원리

jQuery 1.2 버전부터 JSONP호출에 대한 지원이 이루어지고 있다. 

JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 

$.getJSON 방식과 $.ajax방식 2가지 방식으로 JSONP를 이용할 수 있다. 

 1. $.getJSON() 방식

$.getJSON 방식을 이용해 테스트를 해보지 않았다 현재 parameter가 빠진 상태 get방식으로 넘겨주면 된당 ^^...

 

2. $.ajax

본인은 test진행을 위해 localhost:8088과 127.0.0.1로 나누어서 테스트 하였다 .

$.getJSON()방식의 경우 url 끝에 callback=이라는 문자열과 함께 함수명 대신 ?기호를 콜백함수로 넣어준다. 

?를 넣을 경우 임의의 함수이름으로 바뀌어 넘어가게 된다. 굳이 ?를 넣을 필요없고 따로 처리하는 콜백함수가 있다면 해당 함수를 적어줘도 된다. 

-> 오픈 api의 경우에는 콜백함수 명이 지정되어 있을 듯 하기도 한데 나처럼 받아와서 처리해줘도 되니까 뭐 .. 

만약 콜백함수를 지정하지 않을 경우에는 반드시 ?를 써야한다. 

저렇게 

http://127.0.0.1:8088/TEST/charge/aaa.do 로 호출했을 때 발생되는 서블릿은 아래와 같다. 

화면이 작은거 같은데 확대해 보자 ^^.. 

제일 중요한 것은 callback(obj.toString())이다. 

넘겨줄 때 callback함수값 본인같은 경우 임의의 함수값을 넘겼기 떄문에 request.getParameter로 받아 json을 감싸았다. 

이렇게 처리해준 값은 localhost:8088/TEST/charge/test.do 페이지에서 

jsonObject로 넣어준 blogId, message, error_code 값을 받아와 처리할 수 있다. 

 

 

우왕 성공 굳 .. 

근데 그럼 내가 외부 open api를 사용하려면 callback로 json을 감싸서 넘겨주는 api만 사용가능한 것 같은데 

맞는건가 ?.. 그런거 같다. 흠 어렵군