| 화면에 다른 파일을 포함하기
<%@ include file="화면에 포함할 파일"%>
include는 두가지 방식이 존재
1. include directive(지시어)
2. include action(액션)
둘의 큰차이는 실행시점이 다름!
directive는 해당 소스를 포함시킨 후에 컴파일
action은 액션은 실행시점에서 해당 파일을 수행하여 결과를 포함
지시어예시
<%@ include file="/WEB-INF/views/include/header.jsp" %>
액션예시
<jsp:include page="/WEB-INF/views/include/header.jsp"/>
이 게시글에서는 지시어예시만 다루겠음
1.cafe.jsp
2.footer.jsp
1.cafe.jsp
| exception 객체
- 예외가 발생하면 특정 페이지로 이동
<%@ page errorPage="이동할 페이지"%>
에러나면 이동한다!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page errorPage="2_exception_ok.jsp" %> //에러시 요 페이지로 이동해라
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>exception 객체</h2>
<%
request.getParameter("text").toString(); //없는값을 불러와서 일부러 에러발생
%>
</body>
</html>- 에러객체(exception) 사용허용
<%@ page isErrorPage="true"%> 이게 없어도 에러페이지이동이 되기는 함! 대신 exception객체를 못쓸뿐
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %> <!-- 이게 없으면 exception객체를 사용못함 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>500 ERROR</title>
<style>
body {background-color : deepskyblue;}
h2 {font-size: 50px; text-align: center;}
p{test-align: center; color:gold;}
}
</style>
</head>
<body>
<h2>500 Error</h2>
<p>에러타입:<%=exception.getClass().getName() %></p>
<p>에러 페이지: <%=exception.getMessage() %></p>
</body>
</html>| pageContext객체
forward()
- 현재 페이지의 요청과 응답에 관한 제어권을 URL로 지정된 주소로 넘김
- 제어권만 다른 페이지로 넘기고 URL 주소는 유지되는 방식
- response.redirect("..")과는 다름
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
session.setAttribute("userid", "apple");
pageContext.forward("3_pagecontext_ok.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>pageContext 객체</h2>
<p>pageContext의 forward() 예제입니다. 화면에서는 보이지 않습니다</p>
</body>
</html><%@ 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>
<style type="text/css">
body{background-color : deepskyblue;}
</style>
</head>
<body>
<h2>pageContext 객체</h2>
<p>forward() 메소드로 제어권을 받은 페이지입니다,</p>
<p>세션으로 전달받은 아이디 : <%=session.getAttribute("userid") %></p>
</body>
</html>
| Ajax
Ajax(Asynchronous Javascript And SML)
- 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지의 일부분만을 갱신
- 백그라운드 영역에서 서버와 통신하여 그 결과를 웹페이지에 표시
- 서버와 주고 받는 데이터는 JSON, XML, HTML, Text등 사용
Ajax의 장점
- 웹페이지 전체를 다시 로딩하지 않아도 웹페이지의 일부분만을 갱신할 수 있음
- 웹페이지가 모두 로드된 후에도 서버로 데이터를 요청하거나 받을 수 있음
- 다양한 동적 페이지의 구현이 가능
Ajax의 단점
- 페이지 이동이 없기 때문에 히스토리가 남지 않음
- 반복적인 데이터를 요청하게 되면 느려지거나 작동하지 않을 수 있음
- 서버에서 클라이언트로 먼저 요청할 수 없음
XMLHttpRequest 객체
- Ajax의 핵심적인 구성 객체
- 웹 브라우저가 서버와 데이터를 교환할 때 사용
- 백그라운드에서 계속 서버와 통신할 수 있는 기능을 제공
const 변수명 = new XMLHttpRequest();
open(전달방식, URL주소, 동기여부) : 서버에 보낼 Ajax 요청의 형식을 설정
전달방식: get, post 방식 중 선택
URL주소: 요청을 처리할 서버의 파일 주소
동기여부: 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택(true: 비동기)
send(): 작성된 Ajax를 서버로 전달
readyState: xhr(XMLHttpRequest)의 상태를 나타내는 프로퍼티
onreadystatechange : readyState의 값이 변할때마다 호출되는 콜백함수
UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.
OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.
HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.
LOADING (숫자 3) : 요청한 데이터를 처리 중임.
DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript">
function sendRequest(){
const xhr = new XMLHttpRequest(); //0번
xhr.open('get', '4_ajax_ok.jsp?userid=apple&userpw=1234',true); //1번
xhr.send(); //2번 ->3번(불러오는 로딩) ->4번(다불러오면 완료상태로 변경!)
// XMLHttpRequest.DONE -> readyState: 4)
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById('text').innerHTML = xhr.responseText.trim();
}
}
}
</script>
</head>
<body>
<h2>Ajax</h2>
<p><button onclick="sendRequest()">요청 보내기</button></p>
<hr>
<p id="text"> </p>
</body>
</html>ajax_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
out.println("아이디는" + userid + "이며, 비밀번호는 " + userpw + "입니다.");
%>ajax.jsp에서 '4_ajax_ok.jsp?userid=apple&userpw=1234' 이렇게
get방식으로 ajax_ok에게 파라미터를 넘겨준 상태의 가상의 페이지를
ajax.jsp에 잠시 가져온다고 생각하자.(납치 및 강제소환하는 느낌)
그래서 값을 전달하고 값을 받고 할때
페이지의 전환으로 인한 새로고침현상이 없다.
이제는 문밖으로 나가지않아도 필요했던 ajax_ok.jsp가 ajax.jsp안에 있으니까
ajax_ok.jsp의 원래역할은
파라미터를 받아서 자기문서페이지(ajax_ok.jsp)에
"아이디는" + userid + "이며, 비밀번호는 " + userpw + "입니다." 를
출력하는 일만 한다
그래서 ajax기술을 통해
ajax.jsp에서는 ajax_ok.jsp를 소환해서
ajax_ok.jsp에서 쓴 글을
정중하게 요청하는게 아니라!
ajax.jsp : "response 해보세요~ 뱉어내보세요~뱉어내이세키야 "
얘한테 뱉어내라고 시켜가지구
document.getElementById('text').innerHTML = xhr.responseText;
이런식으로 바로 자기 ajax.jsp 문서에 글쓰는데에 사용해버림
ajax_ok 입장에서는 얼마나 어이가 없겠어...
그래서 얘가 할수있었던 마지막 발악은
텍스트뱉어낼때 텍스트 앞뒤로 공백을 붙여서 뱉어내는거야.
맛좀봐라~하는식으로
하지만 악랄한 ajax.jsp는 그걸 눈치채고
document.getElementById('text').innerHTML = xhr.responseText.trim();
trim()을 붙여서 공백까지 제거해버리는...
이렇게 공부하는게 맞을까..? 점점 미쳐가는것같다...
status: xhr이 접속한 서버페이지의 상태
2XX(200번대) : 정상적인 호출
4XX : 페이지 오류
이클립스에 jdbc 드라이버 추가하는법
deployment assembly
java build path
두개 다에 add 해서 apply 해줘야함!
'웹 개발 > 🎆 JSP' 카테고리의 다른 글
| JSP | JSP를이용한 홈페이지구현 - 게시판 (0) | 2022.11.27 |
|---|---|
| JSP | JSP를이용한 홈페이지구현 - 세션체크, 회원정보수정 (0) | 2022.11.27 |
| JSP | JSP를이용한 홈페이지구현 - 로그인,회원가입,로그아웃 (0) | 2022.11.27 |
| JSP | cookie,session,servlet (0) | 2022.11.20 |
| JSP | 디렉티브태그,스크립트릿,표현문,선언문,get,post,getParameter (1) | 2022.11.17 |
