테스트 사이트 - 개발 중인 베타 버전입니다

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

· 9년 전 · 4732

데모 - 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",
        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 

댓글 작성

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

로그인하기

게시글 목록

번호 제목
17591
17590
17589
17588
17587
17584
17583
17582
17581
17579
17577
17575
17574
17573
17572
17569
17564
17560
17559
17555
17554
17553
17552
17549
17548
17547
17542
17533
17531
17524