안녕하세요. IT이곳 저곳을 여행하고 있는 IT여행자입니다.
이번엔 Ajax의 맛을 보기 위해 간단한 샘플 프로그램을 만들어 보겠습니다.
위와 같은 요구사항을 기존 웹 방식과 Ajax 방식을 비교해 보도록 하겠습니다.
[기존 웹 방식]
파일명 : odd_even_check_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홀짝수 체크</title>
<style>
#result{
width: 400px;
height:200px;
border:2px solid #aaa;
padding:10px;
box-sizing:border-box;
}
</style>
</head>
<body>
<%
String temp = request.getParameter("su");
String msg = "" ; //반환 메시지
int su = 0;
if(temp != null && !temp.equals("")){
su = Integer.parseInt(temp);
if(su%2==0){
msg = "짝수입니다.";
}else{
msg = "홀수입니다.";
}
}
%>
<div id='odd_even_check'>
<h2>홀짝수 체크</h2>
<form name='frm' method='post' >
<label>정수를 입력하세요 : </label>
<input type='text' size='5' name='su'/>
<input type='submit' value='체크' />
</form>
<br/>
<div id='result'><%=msg %></div>
</div>
</body>
</html>위의 코드를 실행하면 숫자를 입력했던 입력 상자의 값이 사라집니다. 이유는 '체크' 버튼을 클릭하면 서버에 자료를 요청하면서 현재 페이지가 자동으로 새로고침 되기 때문이다.
물론 jstl이나 el을 사용하여 파라미터로 전달된 값을 아래와 같이 다시 <form/>의 입력 상자에 다시 표시할 수는 있습니다.
그러나 전체 페이지가 새로고침 되는 현상은 어쩔 수 없는 현상이죠. 즉 표시된 다른 콘텐츠 내용이 더 있다면 전체 페이지가 깜빡이면서 다시 그려질 것입니다(일반적으로 우리가 경험하고 있는 현상).
이런 현상을 Ajax를 사용하여 없앨 수 있습니다. 즉, 새로 고침 되어야 할 부분만 새로 고침 되고 나머지 부분은 새로 고쳐지지 않습니다. 이런 처리를 위해 Ajax를 사용하려고 했을 경우, 서버에서 처리될 부분을 별도의 파일로 분리해 주어야 합니다.
[Ajax 방식]
1) 서버에서 처리해 주어야 할 부분을 별도의 파일로 분리한 후 처리 결과를 출력해 주는 코드를 추가해 줍니다.
파일명 : odd_even_check.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String temp = request.getParameter("su");
String msg = "" ; //반환 메시지
int su = 0;
if(temp != null && !temp.equals("")){
su = Integer.parseInt(temp);
if(su%2==0){
msg = "짝수입니다.";
}else{
msg = "홀수입니다.";
}
}
out.print(msg);
%>
2) 기존 <form/>이 있던 페이지에 Ajax 모듈을 추가해 줍니다.
파일명 : odd_even_check_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홀짝수 체크</title>
<style>
#result{
width: 400px;
height:200px;
border:2px solid #aaa;
padding:10px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div id='odd_even_check'>
<h2>홀짝수 체크</h2>
<form name='frm' method='post' >
<label>정수를 입력하세요 : </label>
<input type='text' size='5' name='su'/>
<input type='submit' value='체크' />
</form>
<br/>
<div id='result'></div>
</div>
<script>
// 추가됨 Ajax 모듈
var frm = document.frm;
frm.onsubmit=function(){
var req = new XMLHttpRequest(); //1)객체 생성
var param = "?su=" + frm.su.value; //2) 파라미터 생성
req.open('get', 'odd_even_check.jsp' + param); // 3) 객체 open
req.send(); // 4)서버에 전송
req.onreadystatechange=function(){ // 5) 송수신 상태값 체크 후 결과 표시
if(req.status==200 && req.readyState==4){
var r = document.getElementById('result');
r.innerHTML = req.responseText;
}
}
return false;
}
</script>
</body>
</html>추가된 Ajax 부분을 한줄 한 줄 설명해야 하지만, 본문 글에서는 그냥 Ajax를 사용하면 화면 전체가 새로고침 되지 않더라도 서버의 처리 결과를 특정 영역에 동적으로 표시할 수 있었다는 것만 알고 넘어가도록 하겠습니다.
보다 상세한 사용 설명은 다른 장들을 통해 하도록 하겠습니다.
'BOOKS > Ajax' 카테고리의 다른 글
| 서버 정보를 전체 화면 새로고침없이 실시간으로 검색하기 (0) | 2021.01.06 |
|---|---|
| 3장. 사용자의 요청과 응답에 관한 Ajax의 처리과정 (0) | 2020.12.10 |
| 1장. Ajax 개요 (0) | 2020.12.05 |
