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

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

· 9년 전 · 4729

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

댓글 작성

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

로그인하기

게시글 목록

번호 제목
18200
18195
18193
18181
18179
18173
18170
18164
18158
18155
18152
18151
18150
18140
18139
18138
18131
18130
18120
18119
18118
18117
18116
18111
18110
18108
18107
18106
18100
18090