본문 바로가기
카테고리 없음

jsp - do 로드

MINDIIT 2024. 7. 2. 11:08

- jsp로 do 를 못 불러옴 (include file로 로드를 못함) : java가 더 상위의 언어이기때문

 

1. include  .do파일을 로드 할 수 있을까? (X)

1-1. do 에서 include?? (X)

1-2 do 에서 jsp 로 include 해서 여러개의 페이지를 로드는 할 수 있음

 

2. ajax 데이터 통신

 - do 통신을 할 경우 결과에 대해서만  write (배열, 문자열, 결과값)

 - jsp 통신을 할 경우

session 을 배열형태로 만들면 메모리를 적게 먹음

do 에서는 jsp를 단 한개만 로드할 수 있음

 

 

top session 배열data를 로드

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
 	HttpSession se = request.getSession();
 	ArrayList<String> al = new ArrayList<String>();
 	al.add("hong");
 	al.add("홍길동");
 	al.add("hong@nate.com");
 	se.setAttribute("user",al);
 
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top session 배열data를 생성</title>
</head>
<body>
<input type="button" value="전송" onclick="location.href='./page2.jsp'">
</body>
</html>

 - jsp 로 배열을 생성


 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	HttpSession se = request.getSession();
	//문법에서는 문제 없는것 같지만 500번 에러 발생함
	String data=(String) se.getAttribute("user"); //user 는 배열이어서 String으로 못 받음

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top session 배열data를 로드</title>
</head>
<body>

</body>
</html>

 -> 배열로 받으면 오류발생 X

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	HttpSession se = request.getSession();
	//배열로 출력
	ArrayList data=(ArrayList) se.getAttribute("user"); //user 는 배열이어서 String으로 못 받음
	out.print(data);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top session 배열data를 로드</title>
</head>
<body>
</body>
</html>

 -배열로 받아서 출력 가능함

배열 출력




 

 

 

page2.jsp에서 출력되는 세션 값 및 page4.do에 있는 값도 출력

 

page4.java : page3.jsp 로 보냄

//page3.jsp load 및 데이터 전달
public class page4 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    						throws ServletException, IOException {
		String room = "조선호텔";
		String room_info = "중앙 402호";
		request.setAttribute("room", room);
		request.setAttribute("room_info", room_info);
		
		RequestDispatcher rd = request.getRequestDispatcher("./page3.jsp");
		rd.forward(request, response);
	}

}

 
page2.jsp (page1.jsp 에서 만든 배열을 가져옴) 을 page 3.jsp 에서 로드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="./page2.jsp" %>
<%
	out.print(request.getAttribute("room"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page2에서 출력되는 세션 값 및 page4.do에 있는 값도 출력</title>
</head>
<body>
<%=request.getAttribute("room_info") %>
</body>
</html>

 

page2에서 배열 전체 출력한 것을 로드하고, do 에서 만든 세션값도 가져옴



 

 

ajax로 java에 바로 던져서 출력

●  ajax로 do에 데이터 전송 (ajax1.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<select onchange="infodata(this.value)">
<option value="data1">데이터1</option>
<option value="data2">데이터2</option>
<option value="data3">데이터3</option>
</select>
<div id="dataload">
데이터 출력
</div>
</body>
<script>
function infodata(z) {
	var http, result;
	http = new XMLHttpRequest();
	http.onreadystatechange = function() {
		if(http.readyState==4 && http.status==200){
			console.log(this.response);
		}
	}
	http.open("post","./ajax2.do",true);
	http.setRequestHeader("content-type","application/x-www-form-urlencoded");
	http.send("idx="+z);
}
</script>
</html>​

do에서 받아서 다시 ajax1.jsp 콘솔로 출력
public class ajax2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    				throws ServletException, IOException {
	//콘솔로 찍어내기위한 printwriter
		PrintWriter pw = response.getWriter();
		String idx = request.getParameter("idx");
		//System.out.println(idx);
		pw.write(idx);
		pw.close();
	}
}​

 
출력 결과
select의 value값을 do로 전송 한 후  do에서 핸들링해서 다시 console에 찍음
-> select 를 바꿀 때 마다 데이터가 날아감

 

 

 

ajax통신으로 do에서 배열로 만든것을 printwriter로도 데이터를 전송할 수 있음

●  ajax로 호출 시 RequestDispatcher는 작동하지 않기 때문에 printwirter로 핸들링 하는 수 밖에 없음
( RequestDispatcher는 form 이나 location.href 로만 작동함 ) 


printwriter를 이용해 script로 배열 전송 (스크립트 태그까지 출력되는 문제 발생)
public class ajax2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    				throws ServletException, IOException {
	
		response.setCharacterEncoding("utf-8");
		//db를 select => 20번 이상 통신하면 뻗어버림 : select 자주하면 안됨
		String data1 = "신라호텔";
		String data2 = "방1,주방1,거실1,화장실1";
		String data3 = "16800";
		StringBuffer sb = new StringBuffer();
		sb.append(data1+"|");
		sb.append(data2+"|");
		sb.append(data3);
		
		System.out.println(sb);
		
		PrintWriter pw = response.getWriter();
		String idx = request.getParameter("idx");
		pw.write("<script>"
				+ "var db = new Array();"
				+ "db.push("+data1+");"
				+ "db.push("+data2+");"
				+ "db.push("+data3+");"
				+ "</script>");
		pw.write("ok");
		pw.close();
	}
}​


●  <script>를 출력안되게, 배열 데이터만 출력하는 방법
 - backend 에서 자바스크립트 로 핸들링, front 에서 eval로 받아 출력

배열로 날라옴


do 에서 pw로 <script>없이 이렇게 던져야함.
 - eval로 front-end 에서 받을 시 script 태그를 사용하지 않는다.

public class ajax2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    						throws ServletException, IOException {
	
		response.setCharacterEncoding("utf-8");
		String data1 = "신라호텔";
		String data2 = "방1,주방1,거실1,화장실1";
		String data3 = "16800";
        
		PrintWriter pw = response.getWriter();
		String idx = request.getParameter("idx");
		pw.write("var data = new Array(); "
				+ "data.push('"+data1+"');"
				+ "data.push('"+data2+"');"
				+ "data.push('"+data3+"');");
		pw.close();
	}
}

 
jsp 에서 ajax로 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<select onchange="infodata(this.value)">
<option value="data1">데이터1</option>
<option value="data2">데이터2</option>
<option value="data3">데이터3</option>
</select>
<div id="dataload">
데이터 출력
</div>
</body>
<script>
function infodata(z) {
	var http, result;
	http = new XMLHttpRequest();
	http.onreadystatechange = function() {
		if(http.readyState==4 && http.status==200){
			eval(this.response); //console에 response 받은것 다 출력
			console.log(data);
		}
	}
	http.open("post","./ajax2.do",true);
	http.setRequestHeader("content-type","application/x-www-form-urlencoded");
	http.send("idx="+z);
}
</script>
</html>

 

 

 

티스토리툴바