check25 :: AJAX

AJAX

Oz & Nz/Web 2009. 4. 29. 18:50

Ajax는 자바스크립트를 통하여 비동기적으로 외부 데이터를 처리하기 위한 기법입니다.

※ 더 자세한 정보가 필요하면 위 그림의 링크 문서를 참조해 보시길... ▤)

HTML, XML, Javascript 등에 대한 기초지식과 자바 JSP/Servlet을 탑재한 WebServer가 있다면,
다음 예제를 직접 실행해 보는 것이 위의 정의를 이해하는 가장 빠른 방법입니다.

예제는 두 개의 파일로 구성되어 있습니다.

(1) 클라이언트측의 DynamicUpdate.html 파일은 일정한 시간간격으로 서버측에 서비스를 요청하고,
받은 문자열을 페이지의 지정한 영역에 추가합니다. 이 때 전체페이지를 refresh 하지 않고 지정영역만을 갱신합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
var urlServer = "/your/path/DynamicUpdateServlet.jsp";
function createXMLHttpRequest() {
   if (window.ActiveXObject) {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest();
   }
}

function doStart() {
   createXMLHttpRequest();
   var url = urlServer + "?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 = urlServer + "?task=hoot";
   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를 이용한 페이지 자동 갱신 예제</h1>
버튼을 누르면 이 페이지의 자동 갱신을 시작합니다:
<input type="button" value="시~작!!" id="go" onclick="doStart();"/>
<p>
페이지는 <span id="time" style="color:blue; text-weight:bold">?</span> 초 후에 바뀝니다.
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
   <tr id="row0">
     <td></td>
   </tr>
</tbody>
</table>

</body>
</html>

(2) 서버측 DynamicUpdateServlet.jsp는 클라이언트의 요청에 대해 단순히, 순차적으로 하나의 문자열을 xml 형식으로 던져줍니다.

<%@ page contentType="text/html; charset=euc-kr" %>
<%!
/**
* @(#) DynamicUpdateServlet.jsp
*
* Copyright ⓒ 1999-2000 by (c) CheckersLab.com
* All rights reserved.
*
* NOTICE : Refer our copy and redistribution policy guide.
*
* @author Hoyal Kim, hoyal.kim@gmail.com
*
*/
%>

<%@ page import="java.io.*" %>
<%@ page import="java.net.*" %>

<%!
private int counter = 1;
%>
<%
     String res = "";
     String task = request.getParameter("task");
     String message = "";
     if (task.equals("reset")) {
     counter = 1;
     } else {
     switch (counter) {
      case 1: message = "그대 나의 사랑아"; break;
      case 2: message = "아 웃고 있어도 눈물이 난다"; break;
      case 3: message = "뜨거운 이름 가슴에 두면 왜 한숨이 나는 걸까"; break;
      case 4: message = "아름다운 죄 사랑때문에 홀로지샌 긴 밤이여"; break;
      case 5: message = "마른 꽃 걸린 창가에 앉아 외로움을 마셔요"; break;
      case 6: message = "바람속으로 걸어갔어요. 이른 아침의 그 찻집"; break;
      case 7: message = "그 겨울의 찻집"; break;
      case 8: message = "done"; break;
     }
     counter++;
     }
     res = "<message>" + message + "</message>";
     response.setContentType("text/xml; charset=utf-8");
     response.setHeader("Cache-Control", "no-cache");
     out.println("<response>");
     out.println(res);
     out.println("</response>");
%>