[JSP강의노트] Tip. Servlet/JSP와 JavaScript 간의 데이터 교환
JavaScript와 JSP나 Servlet과의 데이터 교환
웹 브라우저에서 실행되는 JavaScript와 서버에서 실행되는 Servlet/JSP와의 데이터 교환은 가능할까? 답은 '불가능'이다. 서로간에 데이터를 직접 주고 받을 수 있는 방법은 원칙적으로 그리고 보안모델상 불가능하다. 특히 JavaScript의 경우 SendBox 보안 모델을 사용하기 때문에 로컬 디스크에 대한 데이터 저장이나 네트워크를 통한 데이터 전송, 메모리 접근 등의 예민한 작업은 원천적으로 봉쇄되어 있다. 물론 AJAX에서는 얘기가 달라지지만 여기서 논의하고자 하는 것과는 본질적으로 다른 얘기다.
다시 질문으로 되돌아 가서 '불가능'이란 뻔한 답을 왜 질문을 던지고 블로그에 글까지 쓰고 있는 걸까? 조회 수를 올리기 위한 낚시밥이라면 난 돌을 맞아야겠지^^;
데이터를 직접 주고 받는 것은 불가능하지만 꽁수를 써서 주고 받는 것처럼 결과를 보이는 것은 가능하다. 아이디어는 Servlet/JSP는 실행 결과로 HTML 문서를 만들어내고 JavaScritpt는 location.href 프로퍼티를 이용해 웹브라우저에게 URL을 요청하도록 할 수 있다는 점이다.
우선 JSP의 ArrayList의 값들을 JavaScript의 배열로 전달하는 예들 보이겠다. 재미를 위해 일부러 JSP의 변수 이름과 JavaScript의 변수 이름을 똑같이 만들었다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%
ArrayList<String> fruits = new ArrayList<String>();
fruits.add("사과");
fruits.add("배");
fruits.add("포도");
fruits.add("자두");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP의 결과 값을 JavaScript로 전달하기</title>
<script type="text/javascript">
function printFruits() {
var fruits = [
<% for (int i = 0; i < fruits.size(); i++) { %>
"<%= fruits.get(i) %>"<%= i < fruits.size() - 1 ? "," : "" %>
<% } %>];
for (var i = 0; i < fruits.length; i++) {
document.writeln(fruits[i] + "<br />");
}
}
</script>
</head>
<body>
<h1>JSP ArrayList에 저장된 과일들</h1>
<script type="text/javascript">
printFruits();
</script>
</body>
</html>
JSP 입장에서는 ArrayList에 저장된 아이템들을 HTML 문서로 뿌리는 단순한 작업이다. 하지만 이렇게 만들어진 HTML 문서는 다음과 같은 내용이 된다.
원래의 이미지를 보려면 클릭하세요.
다음은 JavaScript의 데이터를 JSP로 전달하는 예제이다.
<?xml version="1.0" encoding="UTF-8" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript의 데이터를 JSP로 전달</title>
<script type="text/javascript">
function storeFruits() {
var fruits = ["사과", "배", "복숭아"];
var queryString = "";
for (var i = 0; i < fruits.length; i++) {
queryString += "fruits=" + encodeURI(fruits[i]);
queryString += (i < fruits.length - 1) ? "&" : "";
}
confirm(queryString);
location.href="jsToJsp.jsp?" + queryString;
}
</script>
</head>
<body>
<input type="button" value="전송" onclick="storeFruits()" />
</body>
</html>
JavaScript는 location.href를 이용하여 쿼리스트링으로 배열의 값을 JSP로 전달한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String[] fruits = request.getParameterValues("fruits");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript의 데이터 출력</title>
</head>
<body>
<h1>자바스크립트의 배열에 저장된 과일들</h1>
<%
for (String fruit : fruits)
out.println(
new String(fruit.getBytes("8859_1"), "utf-8") + "<br />");
%>
</body>
</html>
이를 JSP가 받아서 처리하는 예이다. 여기서 HTTP request Header에 담겨있는 쿼리스트링은 ISO 8859-1로 인코딩되어 있기 때문에 한글의 표시를 위해 UTF-8로 다시 인코딩을 하고 있다.