[JSP Web] AJAX를 이용한 즐겨찾기 구현

AJAX

• 웹에서 화면이 깜박이지 않고 처리를 해준다
• 단점은 AJAX가 진행된 사항은 뒤로 가기가 불가능 하다

Servlet에서는 Redirect와 Forward로 화면을 보여줄 수 있지만

AJAX는 printWriter를 통해서만 사용이 가능하다

# AJAX 리턴 타입

• Text
• XML
• • 사용하면 안됨
  • JavaScript가 XML을 컨트롤 하지 못함
• JSON
• • 컴마(,)를 가지고 여러 데이터를 컨트롤할 수 있음
  • 그러나 서블릿이 JSON을 생성하기 힘듦

화면에 별이나 하트를 보여주고 클릭 시 채워지는 이벤트를 구현한다

우선 즐겨찾기 개념을 추가하기 위해서 테이블을 하나 생성한다

즐겨찾기 테이블이 가져야할 항목으로는 ID와 게시글 ID, 멤버 ID, 생성 날짜정도가 있다

Toad에서 테이블을 추가해줬다

그리고 FAVO_ID_SEQ를 생성해준다

FAVO를 생성하기 위해서 VO, DAO, WEB, BIZ가 모두 동일하게 필요하다

Web이 필요한 이유는 jsp와의 통신이 필요하기 때문이다

Article 프로젝트 (Front)에 favo 패키지를 추가해준다

vo를 생성해서 테이블의 컬럼들을 정의해준다

그리고 난 후 쿼리를 먼저 작성하기 위해 쿼리를 생성한다

이젠 dao를 생성해서 3가지 메소드를 정의해준다

우선 selectFavoriteCount()를 정의한다

insertFavorite() 메소드 정의

deleteFavorite() 메소드 정의

이젠 Biz를 정의해준다

Biz는 간단하게 2가지의 기능을 가지고 있다 있는지 여부를 검사해 있다면 delete

없다면 insert를 분기시켜 주면 된다

Favorite에 존재하는지를 따로 메소드로 뺀 이유는 게시글을 볼 때 하트를 표현해주기 위함이다

이제 Article의 Detail 서블릿으로 가서 변경을 해준다

변경된 부분은 세션을 생성해 멤버를 가져오고 FavoVO를 생성해서 게시글 ID와 멤버 ID를 넣는다 

그리고 Favorite에 추가가 된 데이터 인지를 구분한다 그 후 isExistsFavoriteData를 파라미터로 넘겨준다

이젠 서블릿을 생성해준다

doGet은 접근을 막아주고 doPost로 기능을 수행한다

이제 detail 페이지를 보여주는 jsp에서 글 제목 옆에 하트를 붙여주기로 한다

이제 jQuery 안에 AJAX를 사용해서 요청을 한다

AJAX $.post ( URL, Parameter(JSON Type), Callback(응답받는 데이터) );

AJAX는 응답을 받아서 직접 처리를 해줘야 한다

그러나 지금 favorite 서블릿에서는 어느 값도 넘어오지 않는다

그렇기 때문에 function(data)에서는 아무값이 없기 때문에 성공 여부를 판단하긴 어렵다

클릭한다면 새로고침 후 하트모양이 바뀌고 DB에 저장이 된다

그러나 이제 로그인 세션이 종료되면 (서버 재시작)일 때 하트가 누르면 계속 눌리게 되게 된다

그것을 방지하기 위해서 json을 이용해서 값을 가져와 true일 때만 허용하게 해주면 된다

서블릿에서 맨 마지막 구절에 아래의 구문을 추가해준다

위의 하트가 바뀌는 방식은 하트의 모양를 보고 바꾸는 방식인데

json을 이용해서 진짜 값을 불러와서 바꿔야할 하트로 변경을 해줄 수 있다

isFavorite로 값을 넘기면 jsp에서 jsonData3으로 받고 jsonData3.isFavorite 값으로 판단해서 변경해주면 된다

변경 후엔 개발자 도구의 콘솔을 보면 다음과 같다

console에 찍힌 것을 보면 데이터를 String으로 보냈지만 Object로 받는 것을 볼 수 있다

이 부분은 jsonData3 = JSON.parse(data) 부분 때문에 변경이 된다

isFavorite이 true라면 (비어있다면) 하트를 채워줄 것이고 false라면 하트를 없앤다

그 상황에서 서버를 재시작하고 웹에서 또 하트를 누른다면 SyntaxError가 발생한다

위의 에러는 세션이 만료되었을 때 location.href = "/"; 구문 때문에 발생을 했다

위의 부분도 try~catch도 걸어줘야 한다

위와 같이 jsonData3을 불러올 때 try catch를 해줘야 한다

그렇다면 홈페이지에서 열고 서버 재시작 시 세션이 만료되어 else 부분에 걸리게 된다