앞글에서 Cross-Origin Resource에 접근하는 것에 대해 이야기했다. CORS로 푸는 방법을 예로 들었지만, 이 방법은 IE때문에 아직 전면적 적용이 어렵다. 이번에는 현재 알려진 폭넓게 사용할 수 있는 방법 중에서 가장 간단한 JSONP(JSON with Padding)를 이용한 방법에 대해서 알아보자.
consumer.html
1 <script type="text/javascript">JSONP는 SOP를 피하기 위해, script 태그를 이용한다. 자료를 가져오는 쪽은 JSON응답이 올 때 처리해주는 핸들러와 script를 호출하는 코드로 이루어져 있다.
2 var url = "http://other-domain.com/provider.php";
3
4 function jsonpHandler(data)
5 {
6 alert("provider의 응답: " + data.echo);
7 }
8 function getJson(url)
9 {
10 var script = document.createElement('script');
11 script.setAttribute('src', url+"?callback=jsonpHandler");
12 document.getElementsByTagName("head")[0].appendChild(script);
13 }
14
15 getJson(url);
16 </script>
provider.php
1 <?php자료를 제공하는 쪽은 요청을 받아서 JSON응답을 만들어 출력하는 코드로 이루어져있다. php에는 json_encode() 함수가 있어서 응답 문자열을 간단히 만들 수 있다. 다만 반드시 UTF8로 인코딩된 문자열을 쓰도록하자.
2 $strCallback = $_GET['callback'];
3
4 $strEcho = json_encode(array('echo'=>'야호~'));
5 ?>
6 <?=$strCallback?>(<?=$strEcho?>)
JSONP를 사용한 도메인간 자료교환의
- 장점 : 사용이 간단
- 단점 : 자세한 에러 핸들링이 안됨 (타임아웃은 setTimeout()을 이용해서 처리 가능), 인증정보의 전달이 안되고 보안이 필요한 정보의 전달에 부적합, request시 전달할 수 있는 데이터는 최대 약 2000바이트 정도. (브라우저에 따라 다름)
만약 jQuery를 사용할 수 있는 상황이라면 jQuery.getJSON() 메쏘드를 쓰면 더 간단하게 사용할 수 있다.(API 참조)
'ETC > Script' 카테고리의 다른 글
| 모바일기기 접속확인방법 (0) | 2012.04.25 |
|---|---|
| jQuery.ajax (0) | 2012.04.25 |
| Ajax로 다른 도메인의 자료 가져오기(Cross-Origin Resource Sharing) (0) | 2012.04.25 |
| Left, Right (0) | 2012.04.25 |
| SNS연동 - 자바스크립트로 간단히 처리 (0) | 2012.04.25 |
Posted by 김준홍 (http://www.Juuun.com)
