'AutoRefresh'에 해당되는 글 1건

  1. 2006.04.11 | Auto Refresh 기능 구현하기

Auto Refresh 기능 구현하기

WEB2.0/ajax | 2006. 4. 11. 17:30
Posted by 시반

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>

<dynamicUpdate.html 의 전체 소스 코드>

 

 

package ajaxbook.chap4;

import java.io.*;
import java.net.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 *
 * @author nate
 * @version
 */
public class DynamicUpdateServlet extends HttpServlet {
    private int counter = 1;
   
    /** Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        String res = "";
        String task = request.getParameter("task");
        String message = "";       
       
        if (task.equals("reset")) {
            counter = 1;
        } else {
            switch (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"; break;
            }
            counter++;
        }

        res = "<message>" + message + "</message>";
       
        PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("<response>");
        out.println(res);
        out.println("</response>");
        out.close();
    }
   
    /** Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        doGet(request, response);
    }
   

    /** Returns a short description of the servlet.
     */
    public String getServletInfo() {
        return "Short description";
    }
}

 

<DynamicUpdateServlet 의 전체 소스 코드>

 

 

이번 예제를 실행결과 화면을 먼저 보고 설명하는 것이 좋을 듯 싶다.

 

 


 

위 그림은 dynamicUpdate.html 화면인데 Launch 버튼을 클릭하면 아래 화면의 일정부분이 refresh 될 것이다.

 

 


 

사실 seconds 가 5, 4, 3, 2, 1 으로 값이 줄어드는 것은 소스를 보면 알겠지만 자바스크립트로 처리한 것이고 중요하게 볼것은 그 아래에 있는 문자열이다. 5초가 지날때마다 브라우저는 서버에 비동기적으로 접속해 관련 데이터를 추출하여 추가해주는 부분이다.

 

소스는 그리 길지는 않지만 dynamicUpdate.html 소스는 스크립팅 처리가 좀 들어가 있다. 하지만 지금까지의 강의 내용을 잘 읽어 봤다면 처음나오는 코드나 이해가지 않는 곳은 없으리라 생각한다

 

출처 : jinoxst님의 블로그

'WEB2.0 > ajax' 카테고리의 다른 글

툴팁 구현하기  (0) 2006.04.12
progress bar 기능 구현하기  (0) 2006.04.11
동적으로 리스트박스 구성하기  (0) 2006.04.11
응답 헤더정보 다루기  (0) 2006.04.11
폼 입력값 검증하기  (0) 2006.04.11
 
블로그 이미지

시반

시반(詩伴)이란 함께 시를 짓는 벗이란 뜻을 가지고 있습니다. 함께 나눌수 있는 그런 공간이길 바라며...

카테고리

분류 전체보기 (233)
개발 이야기 (73)
WEB2.0 (57)
DB2 (24)
MySQL (6)
오라클 (26)
기타 (44)
취미 (0)
잡담 (2)