JSP 5일차 - Session, Ajax

 저번시간에는 쿠키에 대해 배웠는데 쿠키는 사용자의 브라우저에 저장된다. 그런데 오늘 배우게 될 세션은 그 반대로  서버에 저장하게 된다. 더 자세히 알아보자. 

 

>Session(세션)
- 내장객체로서 브라우저마다 한개씩 존재하고, 고유한 SessionID 생성 후 정보를 저장한다.
- 클라이언트 측에는 SessionID만 전해주고 후에 클라이언트가 정보가 필요할 땐 그 SessionID만 보내며 정보를 요청한다. 

 간단히 설명하자면 예를 들어 a라는 sessionID에 공간이 할당되고 데이터가 저장되게 된다.사용자가 접속하는 순간 서비스측에서는 a라는 공간을 할당하면서 너 정보 a에다가 저장할꺼야 라고 알려주기 때문에 사용자는 a가 무엇인지 안다. 사용자가 실제로 웹서핑하면서 요청보내면 보내는 요청에는 헤더정보가 포함되어 있을것이다. 요청할때마다 보내는 쿠키중 하나가 session id= a에요 라는 정보를 보내고 있다.서비스측에서는 사용자에게 session을 이용해야 할때 a를 데려와서 session id를 찾을 수 있다.

 

 1.장점
  - JSP에서만 접근할 수 있기 때문에 보안성이 좋다.
  - 저장 용량의 한계가 거의 없다. 
2.단점
  -서버에 데이터를 저장하므로 부하에 걸릴 수 있다.

 상황에 따라 다르지만 때로는 쿠키보다 세션의 장점들 때문에 세션을 쓰는것이 더 안정적이다.

>세션 메소드

1.session.setAttribute(이름(x),값(y)); :x라는 이름안에 y 값을 저장한다.  

2.session.getAttribute(이름);          :x라는 이름 세션을 값과 함께 가지고 온다.        

3.session.removeAttribute(이름);    :제거하려는 이름이 연결되어 있는 이름-값 정보를 제거한다.

4.session.invalidate();                   :세션에 있는 모든 값 제거해준다.

 

<실습1>

로그인 페이지 만들어서 로그인성공하면 main페이지 띄우기, 로그아웃도 가능하도록 만들어보기.

1.login.jsp 

2.login_db.jsp

3.main.jsp

4.logout.jsp

 

 

>★Ajax(Asynchronous Javascript And XML) - 기술의 이름
- 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다. (페이지 이동없이 동작할 수 있다.)
- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 
- 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있다. 
 ( ex: 실시간 검색어,광고)

>Ajax의 장점
1.웹 페이지의 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다.
2.웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거나 받을 수 있다.
3.다양한 UL 구현(동적인 페이지 구현)이 가능해진다.

>Ajax의 단점
1.페이지의 이동이 없기 때문에 히스토리 관리가 안된다. (기록이 안남는다.)
2.반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다.(서버 과부하)
3.페이지의 이동이 없다는 것은 보안상의 문제도 발생할 수 있다는 것이다. 

>Ajax의 구성요소
1.웹 페이지의 표현을 위한 HTML, CSS
2.데이터의 교환을 위한 JSON, XML
3.웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체★
4.통신 결과를 통해 화면 구성을 동적으로 조작하기 위한 DOM 모델 (자바스크립트 필요)

>XMLHttpRequest 객체
- Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.
- 이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다. 
(뷰단과 서버의 뒷길을 추가적으로 만들어서 (페이지 이동없이)교환해야한다.)
- 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 이 xhr 객체를 사용하기 때문이다. 

>XMLHttpRequest 객체 생성
  let 객체명 = new XMLHttpRequest();

>서버에 요청하기
- Ajax에서는 xhr 객체를 사용해서 서버와 데이터를 교환한다.
- 따라서 서버에 요청을 보내기 위해서는 xhr 객체를 생성한 후 객체의 open() 메소드를 통해 통로를 열어주고 send() 메소드를 사용해서 보내주는 과정을 거쳐야한다.

>open()
-서버로 보낼 Ajax 요청의 형식을 설정한다.
    open(전달방식,URL주소,비동기여부)
-전달방식  : GET,POST, ...
-URL 주소  : 요청을 처리할 서버의 파일 주소 전달
-비동기여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택

>send()
- 작성된 Ajax요청을 서버로 전달하는 메소드 
1)send() : GET방식(URL에 데이터가 포함되어 있을것이다)
2)send("키=값"): POST방식

 

<실습2>

회원가입페이지 만들어서 DB검사하여 중복체크까지 하기. 

1.join.jsp

1) 폼 만들기

2) 자바스크립트에서 돔이용하여 입력값들 데려온다

3) 중복 체크시 db와 소통을 위해 xhr 을 이용한다.

 

  Ajax 요청시 xhr 객체는 각 상태별로 readyState가 바뀐다. 처음에는 0 ==(XMLHttpRequest.UNSET, 보내지 않음) 이었다가 open 메소드를 호출하는 순간 1(XMLHttpRequest.OPENED, 열림)로 바뀌고 send 호출시 순차적으로 2(XHR.HEADERS_RECEIVED), 3(XHR.LOADING),4(XHR.DONE)로 바뀐다.
 최종적으로 readyState가 4가 된다면 상태코드(xhr.status)가 성공을 가리키는 200이나 201일때 응답을 확인한다. 

 

2.checkId.jsp

간단히 위 과정을 요약해보자면 아래와 같다. 

 

1.onclick 실행
2.xml객체만들기 (뒷길 만들어서 페이지 이동없이도 유효성 검사하기)  
3.상태변할때 함수 정해두기 (뭐할지)
4..open수행할때 동시에 변화가 일어남
5.적어놓은 함수가 실행되게 된다.
6.xhr 상태가 완료상태니? (DONE 이니?)
7.완료상태가 통신만 되도 완료로 뜬다. 시험은 끝났다고 다 잘본것은 아니다 ㅎㅎ..그래서 통신완료되어도 시험잘봤는지 물어봐야한다 200번,201번이냐?  ( = 성공했어?)
8.성공했니?xhr.responseText 에 담아주기