JSTL 코어 라이브러리 - <c:out> 예제 jsp


<c:out> 태그는 JSP 표현식 (<%= %>)을 대체하는 것으로, 간단한 내용을 출력할 때 사용한다.
jsp 2.0 이상부터는 표현 언어가 지원되므로 굳이 사용하지 않아도 된다고 한다.


<coreTest01.jsp>


<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="
http://java.sun.com/jsp/jstl/core"%>
<!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>Insert title here</title>
</head>
<body>

 <h3>&lt;c:out&gt;</h3>

 <div id="all" style="width: 200px">
  <c:forEach var="member" items="${members}">
   <div id="left" style="background-color: #F36669;width:70px;float:left;">
    <c:out value="${member.name }"></c:out>
   
    <br />
   </div>
   <div id="right" style="background-color: #F39999;">
    <c:out value="${member.email }" escapeXml="false">
     <font color=red>email 없음</font>
    </c:out>
    <br />
   </div>
  </c:forEach>
 </div>
</body>
</html>



========================================================================================================

■     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
        이 부분은  taglib 지시어에 코어 라이브러리를 사용하겠다고 입력 한 것이다.

        
<h3>&lt;c:out&gt;</h3>
        <c:out> 를 그대로 써 버리면 <c:out> 태그로 인식하기 때문에 < , > -> &lt; , &gt; 

        <c:out value="${member.name }"></c:out>
        이 부분을 jsp 코드로 바꾸면 
        <%= ((Member)pageContext.getAttribute("member")).getName() %>
        이런 식으로 쓸 수 있다.

        <c:out value="${member.email }" escapeXml="false">
        escapeXml = false 인 것은 태그 바디에 포함 된 HTML 태그를 해석하도록 한 것이다.
        만약 true 로 준다면 HTML 태그가 화면에 그대로 노출된다.


----------------------------------------------------------------------------------------------------

결과값이 궁금하신 분은 이 jsp 코드만으로는 알 수 없기 때문에
테스트 해 볼 java 파일 입니다.


<InitialMember.java>

import javax.servlet.*;
import java.util.*;

// ServletContextListener 인터페이스를 구현한 클래스 생성
public class  InitialMember implements ServletContextListener {
 // 애플리케이션이 최초 실행될 때 호출되는 메서드
 public void contextInitialized(ServletContextEvent sce) {
   ServletContext context = sce.getServletContext();
   // 애플리케이션에서 공유할 예제 데이터 저장을 위한 ArrayList 생성
   // <Member> 는 ArrayList 에 들어갈 객체타잎으로 소스와 같이 명시적으로 선언해 주는것이 권장됨.
   ArrayList<Member> datas = new ArrayList<Member>();
   
   // datas 객체에 8개의 샘플 데이터를 생성
   for(int i=0;i<8;i++) {
    Member data = new Member("테스트"+i,"test"+i+"@test.net");
    datas.add(data);
   }
   // 9번째와, 10번째 데이터는테스트를 위해  email 항목을 비워둠.
   datas.add(new Member("테스트9",null));
   datas.add(new Member("테스트10",null));
   
   // context 즉 application scope 에 datas 및 Member 객체 저장
   context.setAttribute("members", datas);
   context.setAttribute("member",new Member());
 }
 
 // 필수 구현 메서드 이지만 예제 에서는 특별히 해줄것이 없음.
 public void contextDestroyed(ServletContextEvent sce) {}

}


<Member.java>

// 예제에서 사용할 데이터 클래스
public class Member {
 // 이름과 email 저장을 위한 변수 선언
 private String name;
 private String email;

 // 생성자에서 인자로 변수 설정
 public Member(String name,String email) {
  this.name = name;
  this.email = email;
 }
 // 기본 생성자 에서는 각 변수에 null String 으로 초기화.
 public Member() {
  name="";
  email="";
 }

 public String getName() { return name; }
 public String getEmail() { return email; }
 
 public void setEmail(String email) {
  this.email = email;
 }
 public void setName(String name) {
  this.name = name;
 }
}


<web.xml>

<web-app> ... </web-app> 안에

<listener>
  <listener-class>jspbook.ch11.InitialMember</listener-class>
 </listener>


위에 부분 추가.






Ajax 간단하게 값 넘겨 받아오는 예제 JavaScript


우선 간단하게 Ajax로 입력받은 값을 받아 넘기는 작업 예제이다.


<main.jsp> (꼭 jsp로 작업하지 않아도 된다.)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

var xhr = null;
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}

function requestHello(URL) {
param = f.name.value;
URL = URL + "?name=" + encodeURIComponent(param);
xhr = getXMLHttpRequest();
xhr.onreadystatechange = responseHello;
xhr.open("GET", URL, true);
xhr.send(null);
}
function responseHello(){
if(xhr.readyState == 4){
var str = xhr.responseText;
document.getElementById("message").innerHTML = str;
}else{
alert(!"Fail : "+httpRequest.status);
}
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="name">
<input type="button" value="입력 " onclick="requestHello('hello.jsp')">
</form>
<div id="message"></div>

</body>
</html>


----------------------------------------------------------------------------------------------------

<hello.jsp>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
%>
안녕하세요, <%=name %> 회원님!
</body>
</html>



================================================================================================



저렇게만 한다면 분명히 한글이 깨질 것이다.

이 부분을 -> main.jsp : escape(encodeURIComponent(param))
hello.jsp :  java.net.URLDecoder.decode(request.getParameter("name"),"utf-8")

이렇게 다시 바꾸고 실행해보자.
그럼 한글이 제대로 나온다.

그래도 한글이 깨져서 나온다면 잘 저장하고 tomcat 을 restart 하면 된다.

escape 는 왜 써야 되는지 모르겠지만 (안쓰면 깨짐)
나도 우선 기억해야하니까 저장해 봄....

나중에 제대로 공부해서 다시 추가하겠음ㅋㅋ



1