Ajax로 Cross 도메인간 Json 데이터를 주고 받는 Jsonp 기본 예제

잠돌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 9년 전 · 조회 4735 4735

링크

http://demo.widgets.co.kr/?c=75/95/97 (170)

데모 - http://demo.widgets.co.kr/?c=75/95/97

Ajax로 서버에서 데이터를 가져올 때 Json을 많이 사용합니다만, 같은 서버 내에서만 사용할 수 있습니다.

하지만 이녀석은 서로 다른 도메인에서 데이터를 요청하고 받을 수 있습니다.

이름하야 Jsonp입니다.

기본적인 동작은 요청자 - 답변자 사이에 키값을 주고 받아 요청자에게 정확하게 데이터를 주도록 합니다.

물론 보안이나 트레픽 누수에 관련하여 준비된 서비스에서만 사용하셔야합니다.

경우에 따라서는 아무나 막 쓰게 해서는 서버가 뻗어버릴 수도 있습니다.

이건 아무나 막 쓸수록 좋은 쿠폰 발생같은 서비스에 저는 자주 사용했습니다.

아래는 기본 예제 소스입니다.

<!--호출 페이지소스-->
<script type="text/javascript">
<!--
  var getJsonp = function(){
    var dArray = null;
    var btn = $(".btn");
    btn.click(function(){
      $.ajax({
        dataType:"jsonp",
        jsonp:"callback",
        url:'http://demo.widgets.co.kr/_test/jsonp/test20160805.php',
        data:{id : "check", name: "테스트"},
        success:function(callback){dArray=callback;},// 상단 선언된 변수에 데이터를 담는다.
        complete:function(d){
 
          alert(dArray[0].date);
          alert(dArray[0].id);
          alert(dArray[0].name);
          alert(dArray[0].subject);
          alert(dArray[0].content);
 
        },
        error:function(d){ alert("error "+d.responseText);}
      });
      return false;
    });
  }
  $(function(){
    getJsonp();
  });
//-->
</script>
<a href="javascript:void(0);" class="btn">테스트</a>
 
<!--응답페이지소스-->
<?//http://demo.widgets.co.kr/_test/jsonp/test20160805.php 
  header('Cache-Control:no-cache');
  header('Pragma:no-cache');
  header('Content-Type:text/html; charset=utf-8');
 
  echo $callback."(";
 
  $rets['date'] = urlencode(date('Y-m-d H:i:s'));
  $rets['id'] = urlencode($id);
  $rets['name'] = urlencode($name);
  $rets['subject'] = urlencode("제목입니다.");
  $rets['content'] = urlencode("내용입니다.");
 
  $return[] = $rets;
  $return[] = $rets;
 
  echo urldecode(json_encode($return));
 
  echo ")";
?>

데모 - http://demo.widgets.co.kr/?c=75/95/97

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5396	기타	게시글 스팸방지 방법 중 하나 구글 - reCAPTCHA	슈퍼스타맨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	334
5395	PHP	아이피 위치추적 (ISP 위치 정보) [2]	untitled 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	809
5394	MySQL	웹 느릴 때 꼭 해보는 DB 쿼리 로그 팁 공유합니다 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	582
5393	웹서버	url에 타 도메인을 지정할 수 없습니다. [3]	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	850
5392		pdf.js 사용 오류에 대한 사항 모듈 문제 [3]	oneit 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1205
5391		음악에 맞게 가사의 색상변경 [5]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	1108
5390		vscode가 열릴 때 느리신 분은 한번 해보셔요. [2]	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	893
5389		SVG 아이콘을 쉽게 사용하기 [5]	메이드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	864
5388		오늘의 조언 한마디 script [5]	케빈엉클 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	965
5387		jquery loaded 커스텀 함수	세크티 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	798
5386	JavaScript	한글과컴퓨터 키워드추출스크립트. [2]	nekoieye 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	959
5385	웹서버	사이트 접속을 국내 아이피에만 허용하는 코드를 만들어 봤습니다. [4]	이나라왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	979
5384	JavaScript	위에서 아래로 내려오는 효과 6가지	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	801
5383	기타	groq api 용량 부족할 때 [5]	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	1116
5382	기타	css translate,rotate,scale 은 항상 순서가 고정입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	566
5381	JavaScript	마우스로 td 간격 조정하기. [1]	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	895
5380	기타	python 공유 메모리 [1]	지구인430 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	678
5379	JavaScript	엘레먼트에 다이렉트로 변수,배열,객체 심기	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	681
5378		심플한 게시판 테마 [5]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	1188
5377	기타	x 모양 이모지 모음입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	751
5376	jQuery	0원팁- 숫자형 아이디에 접근하기 [1]	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	561
5375	jQuery	유용하게 써먹는 반응형 grid [1]	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	718
5374	기타	어울리는 색상표 사이트 입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	765
5373	MySQL	db에서 트리거 만들기	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	799
5372	기타	사용하지 않는 css 보는 사이트입니다. [1]	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1001
5371	JavaScript	디바운스 debounce의 개념 [1]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	713
5370	JavaScript	jquery 타이머 만들기 [2]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	718
5369	PHP	특정 환경에서 php 함수내용을 뜯어보기 [3]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1232
5368	PHP	PHP가 없는 환경에서 PHP 라이브러리 호출하기 [4]	어둠사자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1397
5367	기타	[엑셀라이브러리] 간단한 식자재 사용량 계산기 HTML [3]	nekoieye 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1272