728x90
안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다.
이번 포스팅은 Ajax를 사용하여 서버에 있는 정보를 실시간으로 검색하여 전체 화면을 새로 고치지 않고 검색된 정보를 화면에 표시해 보도록 하겠습니다.
실제로는 데이터를 Database를 통해 받아야 하겠지만, 코드의 간결함과, 프로세스의 단순함을 위해 검색할 데이터를 서버 페이지의 Collection에 저장한 후 데이터를 가져와 클라이언트 화면에 표시하도록 하겠습니다.
[시연 영상]
1. 데이터 시트
아래와 같은 데이터를 자바의 Map 구조로 저장할 것입니다.
| 구분 | 요소 |
| 산이름 | 백수산, 금강산, 치악산, 설악산, 지리산, 내장산 |
| 강이름 | 한강, 낙동강, 금강, 한탄강, 두만강, 대동강, 섬진강 |
| 꽃이름 | 장미, 개나리, 진달래, 코스모스, 백합, 물망초 |
2. 데이터를 포함한 서버 페이지 작성
2.1 데이터 시트에 있는 값들을 자바의 Map 구조로 저장합니다.
<%@page import="java.util.Arrays"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 화면 전체 갱신없이 서버 데이터 처리
Map<String, String> map = new HashMap<String, String>();
map.put("mountain", "['백수산', '금강산', '치악산', '설악산', '지리산', '내장산']");
map.put("river", "['한강', '낙동강', '금강', '한탄강', '두만강', '대동강', '섬진강']");
map.put("flower", "['장미', '개나리', '진달래', '코스모스', '백합', '물망초']");
%>
2.2 클라이언트의 요청이 들어온 경우 데이터를 map에서 읽어 들여 JSON 구조로 반환합니다. 만약 요청정보가 들어오지 않은 경우 map의 키값들을 JSON구조로 변환하여 클라이언트에게 전송합니다.
...
String choice = request.getParameter("choice");
if(choice == null){// parameter가 들어오지 않으면 map의 키값들을 반환
Object[] key = map.keySet().toArray();
for(int i=0 ; i<key.length; i++) key[i] = "\"" + key[i] + "\"";
out.print(Arrays.toString(key));
}else{
String r = map.get(choice);
r = r.replaceAll("'", "\"");
out.print(r);
}
3. 클라이언트 UI
<style>
#search > select {
width:150px;
height:200px;
}
</style>
...
<div id='search'>
<h3>전체 화면 갱신없이 서버 데이터 표시</h3>
<select id='choice' size='8'>
</select>
<select id='result' size='8'></select>
</div>
4. Ajax
4.1 페이지가 처음 로딩되었을 때 자바스크립트의 start()함수를 실행하여 서버로부터 왼쪽 <select/>에 표시될 값을 전달받습니다.
<script>
var choice = document.getElementById('choice');
var result = document.getElementById('result');
var req = new XMLHttpRequest();
var start = function(){
req.open('get', 'search_server.jsp');
req.onreadystatechange = function(){
if(req.status==200 && req.readyState==4){
var temp = req.responseText;
var json = JSON.parse(temp);
choice.length = 0; // 기존 데이터 모두 삭제
for(var i=0 ; i<json.length; i++){
choice.options[i] = new Option(json[i],i);
}
}
}
req.send();
}
start()
</script>
4.2 왼쪽 <select/>에서 항목을 클릭하면 항목에 해당하는 값을 서버에서 가져와 오른쪽 <select/>에 표시하는 부분입니다.
<script>
...
choice.onclick = function(){
var param = choice[choice.selectedIndex].text;
req.open('get', 'search_server.jsp?choice=' + param);
req.onreadystatechange = function(){
if(req.status==200 && req.readyState==4){
var temp = req.responseText;
var json = JSON.parse(temp);
result.length = 0; // 기존 데이터 모두 삭제
for(var i=0 ; i<json.length; i++){
var op = new Option(json[i]);
result.options[i] = op;
}
}
}
req.send();
}
...
</script>
[클라이언트 전체 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>search_form</title>
<style>
#search > select {
width:150px;
height:200px;
}
</style>
</head>
<body>
<div id='search'>
<h3>전체 화면 갱신없이 서버 데이터 표시</h3>
<select id='choice' size='8'>
</select>
<select id='result' size='8'></select>
</div>
<script>
var choice = document.getElementById('choice');
var result = document.getElementById('result');
var req = new XMLHttpRequest();
choice.onclick = function(){
var param = choice[choice.selectedIndex].text;
req.open('get', 'search_server.jsp?choice=' + param);
req.onreadystatechange = function(){
if(req.status==200 && req.readyState==4){
var temp = req.responseText;
var json = JSON.parse(temp);
result.length = 0; // 기존 데이터 모두 삭제
for(var i=0 ; i<json.length; i++){
var op = new Option(json[i]);
result.options[i] = op;
}
}
}
req.send();
}
var start = function(){
req.open('get', 'search_server.jsp');
req.onreadystatechange = function(){
if(req.status==200 && req.readyState==4){
var temp = req.responseText;
var json = JSON.parse(temp);
choice.length = 0; // 기존 데이터 모두 삭제
for(var i=0 ; i<json.length; i++){
choice.options[i] = new Option(json[i],i);
}
}
}
req.send();
}
start()
</script>
</body>
</html>
[서버 전체 코드]
<%@page import="java.util.Arrays"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 화면 전체 갱신없이 서버 데이터 처리
Map<String, String> map = new HashMap<String, String>();
map.put("mountain", "['백수산', '금강산', '치악산', '설악산', '지리산', '내장산']");
map.put("river", "['한강', '낙동강', '금강', '한탄강', '두만강', '대동강', '섬진강']");
map.put("flower", "['장미', '개나리', '진달래', '코스모스', '백합', '물망초']");
String choice = request.getParameter("choice");
if(choice == null){
Object[] key = map.keySet().toArray();
for(int i=0 ; i<key.length; i++) key[i] = "\"" + key[i] + "\"";
out.print(Arrays.toString(key));
}else{
String r = map.get(choice);
r = r.replaceAll("'", "\"");
out.print(r);
}
%>
이상 IT여행자였습니다.
'BOOKS > Ajax' 카테고리의 다른 글
| 3장. 사용자의 요청과 응답에 관한 Ajax의 처리과정 (0) | 2020.12.10 |
|---|---|
| 2장. ajax 초간단 샘플 프로그램 (0) | 2020.12.05 |
| 1장. Ajax 개요 (0) | 2020.12.05 |
