auto refresh 기능, 즉 자동으로 페이지의 일정부분을 지정한 시간마다 정보를 업데이트 해주는 기능이다.
우선 이런 기능을 이미 구현해 놓은 싸이트들을 살펴보자.
<최근 소식을 ajax 를 이용하여 소팅 기능을 구현한 싸이트(www.digg.com/spy)>
<다운로드 카운트를 ajax 를 이용하여 구현한 싸이트(www.apple.com/itunes)>
위 두 싸이트를 살펴보면 일정시간을 설정하여 지속적으로 해당 부분만 정보가 수정되는 것을 확인 할 수 있다. 이번 주제 역시 ajax 의 전형적인 특징으로 전체 페이지가 새로고침되지 않고 필요한 일정부분만 정보가 수정된다는데 있다.
단순한 예제를 통해서 auto refresh 기능에 대해서 생각해 보자
[샘플구현보기]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=reset";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=foo";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val - 1;
if (new_int_val > -1) {
setTimeout("refreshTime()", 1000);
time_span.innerHTML = new_int_val;
} else {
time_span.innerHTML = 5;
}
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body = table.getElementsByTagName("tbody").item(0);
var first_row = table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row, first_row);
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart();"/>
<p>
Page will refresh in <span id="time">5</span> seconds.
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
<example11.html 의 전체 소스 코드>
<?
session_start();
class xmlClass{
var $items = array();
var $counter = 1;
var $task = "";
function outputXml(){
header("Content-type: text/xml");
printf("<?xml version=\"1.0\" encoding=\"%s\" ?>\n","EUC-KR");
print("<rss version=\"2.0\">\n");
$this->printChannel();
print("</rss>\n");
}
function printChannel(){
foreach($this->items as $item){
if($item["modelYear"] == $this->modelYear){
if($item["models"] == $this->make){
foreach ($item as $name => $value){
$value = htmlspecialchars($value);
printf("<%s>%s</%s>\n",$name,$value,$name);
}
}
}
}
}
function addItem($item){
array_push($this->items,$item);
}
function makexml(){
if ($this->task == "reset") {
//$this->counter = 1;
$_SESSION["counter"] = 1;
} else {
switch ($_SESSION["counter"]) {
case 1: $message = "Steve walks on stage"; break;
case 2: $message = "iPods rock"; break;
case 3: $message = "Steve says Macs rule"; break;
case 4: $message = "Change is coming"; break;
case 5: $message = "Yes, OS X runs on Intel - has for years"; break;
case 6: $message = "Macs will soon have Intel chips"; break;
case 7: $message = "done"; $_SESSION["counter"] = 0; break;
}
$_SESSION["counter"]++;
}
$this->addItem(array("message"=> $message));
$this->outputXml();
}
}
$myxml = new xmlClass();
$myxml->task = $task;
$myxml->makexml();
?>
<example11.php 의 전체 소스 코드>
이번 예제는 실행결과 화면을 먼저 보고 설명하는 것이 좋을 듯 싶다.
[샘플구현보기]
사실 seconds 가 5, 4, 3, 2, 1 으로 값이 줄어드는 것은 소스를 보면 알겠지만 자바스크립트로 처리한 것이고 중요하게 볼것은 그 아래에 있는 문자열이다. 5초가 지날때마다 브라우저는 서버에 비동기적으로 접속해 관련 데이터를 추출하여 추가해주는 부분이다.
소스는 그리 길지는 않지만 dynamicUpdate.html 소스는 스크립팅 처리가 좀 들어가 있다. 하지만 지금까지의 강의 내용을 잘 읽어 봤다면 처음나오는 코드나 이해가지 않는 곳은 없으리라 생각한다.
