메뉴 건너뛰기

검색창 닫기

XEDITION

Web

[jQuery] 실시간 업데이트(real time page update)

proin 2021.04.06 11:25 조회 수 : 1

https://link2me.tistory.com/1139

화면(page)을 주기적으로 자동 갱신해야 하는 경우가 있다.

아래 코드는 real time update 보다는 일정한 주기로 업데이트 처리하도록 했다.

갱신 주기를 짧게 하면 실시간 업데이트가 된다. 

서버에서 데이터를 가져와야 하는 경우에 너무 빠른 갱신 주기는 부하를 야기할 수 있으므로 주의가 필요할 수도 있다.

구글링을 해서 실제 데이타가 맞는지 확인하면 맞지 않은 경우도 있다.

그래서 반드시 샘플 데이터를 만들고 직접 테스트를 해보고 동작 여부를 확인하고 코드를 적어둔다.

 

<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<!-- 자동 갱신 스크립트 include -->

<script>
var timerID;

$(document).ready(function () {
    $('#execute').on('click',function(e){
        e.preventDefault();
        updateData();
    });
    $('#stop').on('click',function(e){
        e.preventDefault();
        clearTimeout(timerID); // 타이머 중지
        $('#showtime').html('');
    });    
});

function updateData(){
    $.ajax({
      url: "getserver.php",
      type:"post",
      cache : false,
      success: function(data){ // getserver.php 파일에서 echo 결과값이 data 임
       $('#showtime').html(data);
      }
    });
    timerID = setTimeout("updateData()", 2000); // 2초 단위로 갱신 처리
}
</script>

</head>

<body>
<p>time : <span id="showtime"></span></p>
<input type="button" id="execute" value="실행" />
<input type="button" id="stop" value="중지" />
</body>
</html>

 

==== getserver.php ===
<?php
$time = date("H:m:s");
echo $time;
?>

 

ajax 는 비동기 Javascript 와 XML를 말한다.

ajax 를 사용하면 페이지 이동 없이 전체 HTML 이 아닌, XML 이나 JSON형식으로 구성된 새로운 데이터를 XMLHttpRequest 객체를 통해 받아온다.


 

 

 

 

 

 

 

 

이 게시물을
목록
쓰기 태그
위로