동적으로 리스트박스 구성하기
전통적으로 웹 프로그램밍은 사용자 입력에 의존한 step by step 어플리케이션에 매우 적합한 방식이다. 그 만큼 이전 페이지와 이후 페이지 사이에서의 사용자 입력이 중요하다. 어떻게 보면 이런 step by step 방식의 페이지 구성은 웹이 아닌 다른 프로그램과 비교해봤을때 어떻게 보면 단순하고 멍청해보이기까지 한다. AJAX 가 도입되면서 전통적인 웹 프로그램에 조금씩 수정이 가해지고 있는데 이번장에서는 지금까지 배운 내용만을 토대로 두개의 select box 값이 파라미터가 되어 매칭되는 결과를 동적으로 보여주는 예제를 소개하기로 한다.
사실 AJAX 를 사용하지 않더라도 이런 효과는 이전에도 가능했다. select box 의 value 값과 매칭결과를 한꺼번에 받아 hidden 요소나 혹은 다른 방식으로 웹페이지에 저장했다가 사용자의 입력에 따라 그 부분만 취사선택해서 보여주면 된다. 하지만 이경우 데이타가 많아지면 페이지 로딩시간이 지연되고 사용자가 급증할수록 서버에 무리가 갈 것이다. 그리고 일반적으로 클라이언트 보다는 서버 머신의 성능이 월등하므로 많은 데이터를 서버로부터 한꺼번에 받아서 브라우저에서 스크립팅언어로 데이터를 분석해서 보여주는 것은 역시 비효율적이다.
따라서 이번에는 사용자의 입력이 있을때마다 비동기 방식으로 서버에 접속해 그 결과를 바로 알 수 있는 예제를 살펴보자. AJAX 의 가장 큰 장점 중의 하나는 역시 전체 페이지 로딩이 필요 없다는 것이다. 물론 전체 페이지 로딩이 필요한 경우도 있지만, 그렇지 않은 경우에도 전체 페이지가 로딩된다는 것은 결국 서버와 클라이언트 모두 불필요한 작업을 계속 해야 된다는 것을 의미한다. 서버쪽 비지니스로직 프로그램을 해본 개발자는 잘 알 것이다. 서버의 성능을 판단하는 지표중에 TPS 라고 있다. 프로젝트를 진행하면서 구현이 끝나면 전체 성능 및 로드 테스트를 진행하는데 1 TPS 올리는 것이 얼마나 어려운지 안 해본 사람은 모를 것이다. 자원을 좀더 효율적으로 사용해보자. 그리고 좀 더 스마트하게 웹기술을 적용하게 보자.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Filling Lists</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 refreshModelList() {
var make = document.getElementById("make").value;
var modelYear = document.getElementById("modelYear").value;
if(make == "" || modelYear == "") {
clearModelsList();
return;
}
var url = "RefreshModelList?"
+ createQueryString(make, modelYear) + "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function createQueryString(make, modelYear) {
var queryString = "make=" + make + "&modelYear=" + modelYear;
return queryString;
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
updateModelsList();
}
}
}
function updateModelsList() {
clearModelsList();
var models = document.getElementById("models");
var results = xmlHttp.responseXML.getElementsByTagName("model");
var option = null;
for(var i = 0; i < results.length; i++) {
option = document.createElement("option");
option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
models.appendChild(option);
}
}
function clearModelsList() {
var models = document.getElementById("models");
while(models.childNodes.length > 0) {
models.removeChild(models.childNodes[0]);
}
}
</script>
</head>
<body>
<h1>Select Model Year and Make</h1>
<form action="#">
<span style="font-weight:bold;">Model Year:</span>
<select id="modelYear" onchange="refreshModelList();">
<option value="">Select One</option>
<option value="2006">2006</option>
<option value="1995">1995</option>
<option value="1985">1985</option>
<option value="1970">1970</option>
</select>
<br/><br/>
<span style="font-weight:bold;">Make:</span>
<select id="make" onchange="refreshModelList();">
<option value="">Select One</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Pontiac">Pontiac</option>
</select>
<br/><br/>
<span style="font-weight:bold;">Models:</span>
<br/>
<select id="models" size="6" style="width:300px;">
</select>
</form>
</body>
</html>
<dynamicLists.html 의 전체 소스>
package ajaxbook.chap4;
import java.io.*;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;
public class RefreshModelListServlet extends HttpServlet {
private static List availableModels = new ArrayList();
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
int modelYear = Integer.parseInt(request.getParameter("modelYear"));
String make = request.getParameter("make");
StringBuffer results = new StringBuffer("<models>");
MakeModelYear availableModel = null;
for(Iterator it = availableModels.iterator(); it.hasNext();) {
availableModel = (MakeModelYear)it.next();
if(availableModel.modelYear == modelYear) {
if(availableModel.make.equals(make)) {
results.append("<model>");
results.append(availableModel.model);
results.append("</model>");
}
}
}
results.append("</models>");
response.setContentType("text/xml");
response.getWriter().write(results.toString());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public void init() throws ServletException {
availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));
}
private static class MakeModelYear {
private int modelYear;
private String make;
private String model;
public MakeModelYear(int modelYear, String make, String model) {
this.modelYear = modelYear;
this.make = make;
this.model = model;
}
}
}
<RefreshModelListServlet.java 의 전체 소스>
사실 위 샘플예제 또한 솔직히 추가적인 설명은 하지 않겠다. 만일 자바를 모르는 사람이라면 서버쪽 프로그램의 코드 하나하나를 이해하려고 할 필요는 없을 듯 싶다. 핵심은 ajax 이다. 이번 예제의 서버 프로그램이 길어지게 된 이유는, 사실 비지니스 로직에서는 DB 데이터를 분석하여 매칭되는 결과를 브라우저로 보내줘야 하지만 그렇게 되면 서버 프로그램이 더 복잡해지므로 샘플의 단순화를 위해 좀 무식하게 작성하였다.
<연도와 제조회사 선택여부에 따라서 맨 아래 모델 종류가 동적으로 바뀌는 화면>
출처 : jinoxst님의 블로그
'WEB2.0 > ajax' 카테고리의 다른 글
| progress bar 기능 구현하기 (0) | 2006.04.11 |
|---|---|
| Auto Refresh 기능 구현하기 (0) | 2006.04.11 |
| 응답 헤더정보 다루기 (0) | 2006.04.11 |
| 폼 입력값 검증하기 (0) | 2006.04.11 |
| 서버와 통신하기(요청/응답 처리) (0) | 2006.04.11 |
