AJAX
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>");
%>
'Web(웹) Study > Java Script' 카테고리의 다른 글
| 검색어 자동완성기능 (서제스트)의 단점.. (0) | 2007.12.21 |
|---|---|
| Prototype과 Rico를 이용해 만든 드래그 페이지 (0) | 2007.12.21 |
| 유효성 검사 툴팁 (innerHTML) (0) | 2007.12.21 |
| 자바스크립트 이벤트 (0) | 2007.12.19 |
| 작성완료시에만 전송시키기 (0) | 2007.12.19 |