Simulz :: (jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기

(jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기

PC&웹/웹프로그래밍 : 2010/02/06 16:59

준비물: (jQuery) 연결하기

브라우저 기본 보안 설정으로는 현재 페이지의 호스트가 아닌 다른 서버에 HTTP 요청을 할 수 없다.

하지만 JSONP를 사용하면 보안 설정을 바꾸지 않고도 원격 데이터를 가져올 수 있다.

이 블로그에서는 게시물 아래 인기순 Top 글 목록에 적용되어있다.

데이터를 보내줄 원격 도메인 쪽에 JSON 형식으로 출력하도록 PHP 스크립트 코드를 작성한다.<?php $json['key'] = '여러 형식의 데이터'; echo $_GET['callback'].'('.json_encode($json).');'; ?>
$json['key'] 에 저장된 자료는 자바스크립트에서 data.key 형식으로 가져올 수 있다.

json_encode()
배열을 JSON 형식으로 인코딩한다.

데이터를 보여줄 곳에 스크립트를 작성한다.$.getJSON("http://simulz.com?callback=?", function(data) { $(selector).html(data.key); });
URL은 다른 도메인 주소를 입력하면 되며 필요에 따라 &키=값을 추가할 수 있다.

callback=?
'?' 문자는 jQuery가 임의의 콜백 함수명으로 바꿔주며, 그 값은 jsonp1234567890123 와 같은 임의값이다.

이렇게 요청을 하면 로컬 JSON을 요청한 것과 동일하게 data로 전달한다.

data에서 자료를 가져오려면 PHP에서 설정한 key값을 지정하면 된다.

data.key로 했다면 '여러 형식의 데이터'를 가져오게 된다.

'PC&웹 > 웹프로그래밍' 카테고리의 다른 글

(jQuery) 이미지 카운터 실시간 갱신하기 (0)	2010/02/09
(jQuery) 다음뷰 추천 버튼 바꾸기, 관련글 지우기 (0)	2010/02/07
(jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기 (0)	2010/02/06
(jQuery Plugin) CyclicFade 깜빡이는 효과 적용하기 (0)	2010/02/06
(jQuery) 블로그 태그 목록을 버튼으로 섞기 (0)	2010/02/05
(jQuery) 블로그에 로딩 중 표시하기 (0)	2010/02/05