화면(page)을 주기적으로 자동 갱신해야 하는 경우가 있다.
아래 코드는 real time update 보다는 일정한 주기로 업데이트 처리하도록 했다.
갱신 주기를 짧게 하면 실시간 업데이트가 된다.
서버에서 데이터를 가져와야 하는 경우에 너무 빠른 갱신 주기는 부하를 야기할 수 있으므로 주의가 필요할 수도 있다.
구글링을 해서 실제 데이타가 맞는지 확인하면 맞지 않은 경우도 있다.
그래서 반드시 샘플 데이터를 만들고 직접 테스트를 해보고 동작 여부를 확인하고 코드를 적어둔다.
<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 -->
$(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 객체를 통해 받아온다.
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [Jquery] 부모창 제어/접근 (0) | 2016.12.18 |
|---|---|
| [jQuery] form문에서 submit 시 window.open 으로 action 처리 하기 (0) | 2016.12.18 |
| [jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0) | 2016.12.07 |
| [jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 연동개념) (0) | 2016.12.06 |
| [jQuery] jqplot 를 이용한 막대 그래프 통계 (4) | 2016.12.06 |
Link2Me
