JSP/Servlet | 클라이언트와 서버 사이의 값 전달 | Ajax를 사용하여 JSP에 정보 전달
폼 전송은 분명히 HTML의 기본이긴 하지만, 최근에는 그다지 많이 사용하지 않게 되고 있다. 보낼 때마다 페이지를 매번 서버에서부터 다시 로드해서 다시 읽어 들여 새로 고침을 하기에 싫어하는 사람도 많다.
폼 전송 대신에 서버와의 통신으로 많이 사용되고 있는 것이 “Ajax"이다. Ajax는 JavaScript를 이용하여 서버와 비동기 통신을 하는 기능이다. 비동기(처리가 끝날 때까지 기다리지 않고 먼저 처리를 진행 방식)이기 때문에 통신하는 동안 다른 조작을 할 수 없게 되는 일도 없고, 백그라운드로 필요한 정보를 얻기 때문에 페이지를 이동하지도 않으면서 화면 표시를 업데이트 할 수 있다.
Ajax 자체는 따로 JSP가 없어도, HTML과 JavaScript만 있으면 사용할 수 있다. 즉, 보통의 HTML 파일로 가능하다. Ajax에서 액세스하는 “서버 사이드 프로그램"에 JSP를 사용하면 된다.
이것은 실제로 샘플을 보는 편이 빠를 거다. 아래에 간단한 예제를 보도록 하자.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<style>
h1 {font-size:16pt; background:#AAFFAA; padding:5px; }
</style>
<script type="text/javascript">
function doAction(){
var req = createRequest();
if (req == null){
alert("실행이 되지 않는다!");
return;
}
var s = document.getElementById('input').value;
req.open("post", "hello.jsp?param=" + encodeURI(s));
req.setRequestHeader("User-Agent","XMLHttpRequest");
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var msg = document.getElementById('msg');
msg.innerHTML = this.responseText;
}
}
req.send();
}
function createRequest(){
var httplist = [
function(){ return new XMLHttpRequest(); },
function(){ return new ActiveXObjct("Msxml2.XMLHTTP"); },
function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
];
for(var i = 0;i < httplist.length;i++){
try {
var http = httplist[i]();
if (http != null) return http;
} catch(e){
continue;
}
}
return null;
}
</script>
</head>
<body>
<h1>Hello App Engine!</h1>
<p id="msg">무언가 써서 송신해 주세요.</p>
<table>
<tr>
<td>입력</td>
<td><input type="text" id="input" name="input"></td></tr>
<tr>
<td></td>
<td><button onclick="doAction();">Send</button></td>
</tr>
</table>
</body>
</html>
hello.jsp
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="utf-8"%>
<%
String method = request.getMethod();
if ("GET".equals(method)){
out.println("can't access!");
} else {
String inpt = request.getParameter("param");
out.println("당신, '" + inpt + "' 라고 썼습니다.");
}
%>
여기에서는 index.html과 hello.jsp을 사용하고 있다. index.html에 액세스하여 입력 양식에 무엇인가 쓰고 버튼을 누르면 Ajax 통신으로 hello.jsp에 액세스하고 결과를 표시한다.
Ajax 통신에 대해서는 JSP와는 관계 없기 때문에 설명은 생략한다(관심있는 사람은 “Ajax로 비동기 서버 통신"에 대해서 알아보고 바란다). 여기에서는 Ajax으로 억세스하는 JSP 측의 처리를 확인한다.
이번에는 hello.jsp에 POST로 액세스하여, 결과를 받을 수 있도록 하고 있다. 직접 이 페이지에 액세스 (GET으로 액세스)하는 경우에는 “can not access!“가 표시되도록 되어 있다. 이러한 GET과 POST의 사용 구분은 request 메소드로 알아 낼 수 있다.
String method = request.getMethod();
if ("GET".equals(method)){...중략...}
request 객체의 “getMethod"는 액세스 메소드를 반환한다. 반환값은 “GET” 또는 “POST” 중 하나이다. JSP의 getParameter의 메소드는 GET이든 POST이든 동일하게 호출 값을 얻을 수 있다. 이용 상으로는 JSP는 GET/POST를 의식하지 않고 동일하게 취급할 수 있도록 설계되어 있다. 하지만 때로는 “GET의 경우 하는 처리, POST의 경우에 하는 처리"와 같이 처리를 나누지 않으면 안되는 것이 있다. 이러한 경우 getMethod가 사용된다.
다른 부분은 특별히 어려운 부분은 없을 것이다. out.println으로 출력한 것이 그대로 Ajax 통신으로 클라이언트로 전송되는 것이다. 또한 이번에는 Ajax으로 텍스트 값을 받을 뿐이다. 처음에 있는 page 지시문을 다음과 같이 작성되어 있다.
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="utf-8"%>
잘 보면 contentType="text/plain; charset=utf-8"으로 되어 있다. text/html 대신에 text/plain으로 변경되어 있다. 이렇게 “서버에 요청하여 결과를 받을 뿐"인 경우에는 그냥 텍스트를 출력할 뿐이기에 text/plain으로 해야 한다.