3. Ajax - 댓글 삭제

Ajax (Asynchronous JavaScript and XML)는

웹 브라우저와 웹 서버가 통신을 하여 서버에서 반환된 결과를

전체 웹 페이지의 로딩 없이 서비스를 사용할 수 있게 한다.

즉, 현재 구현한 댓글은 사용자가 하나의 댓글을 달면

댓글 내용이 웹 서버로 전송되고(submit)

웹 서버가 데이터베이스에 데이터를 저장한 후,

모든 댓글을 리스트로 가져와서 웹 페이지를 구성하여 클라이언트(웹 브라우저)에게 전달한다.

정리하면 하나의 댓글을 저장하고 현재 페이지를 다시 읽어와서 보여 주는 것이다.

이 경우 네트워크로 주고 받는 데이터 양도 많고 (속도 저하 문제)

웹 브라우저가 다시 HTML을 해석해서 보여주는(CPU, 메모리 사용) 낭비를 하게 된다.

이러한 낭비를 줄이고자

수정된 내용만 서버로 보내고,

수정된 내용만 클라이언트로 보내서 반영하는 방법을 사용하게 된다.

데이터 베이스에 댓글이 잘 저장되었으면

추가된 댓글만 화면에 적절하게 보여 주면 되고

이때 사용하는 기술을 Ajax라고 한다.

자세한 내용은 다음 생활 코딩에서 확인하여 익혀두길 바란다.

https://opentutorials.org/course/1375/6843
https://opentutorials.org/course/1375/6851

앞서 처리한 Ajax를 사용하지 않은 JQuery처리와

지금부터 처리하는 Ajax를 사용한 JQuery처리를 구별하기 위해

Ajax를 사용하지 않은 JQuery는 BoardRead,jsp

Ajax를 사용한 JQuery는 BoardReadAjax,jsp파일에 따로 구현했다.

글읽기 컨트롤에서 다음과 같이 호출파일 명을 바꾸어주면 확인할 수 있다. 

    @RequestMapping(value = "/board7Read")
    public String board7Read(HttpServletRequest request, ModelMap modelMap) {
       
        String brdno = request.getParameter("brdno");
       
        boardSvc.updateBoard6Read(brdno);
        BoardVO boardInfo = boardSvc.selectBoardOne(brdno);
        List<?> listview = boardSvc.selectBoard6FileList(brdno);
        List<?> replylist = boardSvc.selectBoard6ReplyList(brdno);
       
        modelMap.addAttribute("boardInfo", boardInfo);
        modelMap.addAttribute("listview", listview);
        modelMap.addAttribute("replylist", replylist);
       
        return "board7/BoardRead";
        //return "board7/BoardReadAjax";
    }

Board7Ctr.java

먼저 가장 쉬운 예로 댓글 삭제를 바꾸어 본다.

기존 코드는 form 태그(form2)의 action에 삭제 컨트롤 주소를 넣고 (board7ReplyDelete),

삭제할 댓글번호를 파라메터로 설정해서 전송(submit)하면 된다.

function fn_replyDelete(reno){
    if (!confirm("삭제하시겠습니까?")) {
        return;
    }
    $("#form2").attr("action", "board7ReplyDelete");
    $("#reno2").val(reno);
    $("#form2").submit();   
}

BoardRead.jsp

JQuery Ajax로 삭제하려면 다소 복잡한 처리가 필요하다.

다음 코드와 같이 데이터 전송을 위해 필요한 정보(파라미터)는

키와 값으로 구성된 JSON 방식으로 설정한다.

function fn_replyDelete(reno){
    if (!confirm("삭제하시겠습니까?")) {
        return;
    }
    $.ajax({
        url: "board7ReplyDeleteAjax",
        type:"post",
        data: {"brdno": $("#brdno").val(), "reno": reno},
        success: function(result){
            if (result=="OK") {
                $("#replyItem"+reno).remove();
                alert("삭제되었습니다.");
            } else{
                alert("댓글이 있어서 삭제할 수 있습니다.");
            }
        }
    })
}

BoardReadAjax.jsp

각 Ajax의 파라미터 키에 대한 설명은 다음 표와 같다.

키	설명
url	컨트롤 주소
type	폼 데이터 전송 타입(get/post)
data	전송하려는 데이터를 다시 JSON으로 지정
success	서버에서 처리가 완료된 후 반환된 값을 처리할 콜백 함수

전송할 데이터(data)는

현재 읽고 있는 게시 글번호(brdno)와 삭제하고자 하는 댓글 번호(reno)를

JSON 형식({})으로 만들어서,

삭제한 컨트롤 주소(url)로 board7ReplyDeleteAjax를 지정하여 실행한다. 

board7ReplyDeleteAjax는 기존의 board7ReplyDelete와 같은 코드를 가지는 컨트롤인데

지정된 댓글을 삭제한 후

board7ReplyDelete는 글읽기로 가서(redirect) 댓글 리스트를 다시 화면에 출력하게 구현하였고

board7ReplyDeleteAjax는 삭제 후 성공 여부를 반환한다(response.getWriter()).

    @RequestMapping(value = "/board7ReplyDelete")
    public String board7ReplyDelete(BoardReplyVO boardReplyInfo) {
       
        if (!boardSvc.deleteBoard6Reply(boardReplyInfo.getReno()) ) {
            return "board7/BoardFailure";
        }
        return "redirect:/board7Read?brdno=" + boardReplyInfo.getBrdno();
    }
   
    @RequestMapping(value = "/board7ReplyDeleteAjax")
    public void board7ReplyDeleteAjax(HttpServletResponse response, BoardReplyVO boardReplyInfo) {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=UTF-8");
       
        try {
            if (!boardSvc.deleteBoard6Reply(boardReplyInfo.getReno()) ) {
                response.getWriter().print(mapper.writeValueAsString("Fail"));
            } else {
                response.getWriter().print(mapper.writeValueAsString("OK"));
            }
        } catch (IOException ex) {
            System.out.println("오류: 댓글 삭제에 문제가 발생했습니다.");
        }
    }

Board7Ctr.java

컨트롤에서 반환하는 값도 JSON방식으로 반환되는 것으로

위 코드는 자주 사용되는 형식이니 잘 기억해 두어야 한다.

이 코드는 성공(OK), 실패(Fail)이라는 문자열을 반환한다.

마지막으로 success 키에 적용된 콜백 함수는

Ajax로 전송되어 처리가 완료되면 실행되는 함수로

서버의 컨트롤에서 반환된 성공(OK), 실패(Fail)를 함수의 파라미터 변수인 result로 받아서 처리한다.

result값이 OK이면 성공메시지를, 아니면 실패 메시지를 사용자에게 보여준다(alert).

추가적으로 성공일 때는

현재 삭제한 댓글에 해당하는 DIV를 찾아서($("#replyItem"+reno)) 삭제함으로써(remove)

사용자에게 삭제가 제대로 된 것으로 보여지게 만들어야 한다.

즉, Ajax는 기존 방식과 다른 것이

전체 데이터를 처음부터 다시 읽어와서 화면에 출력하는 것이 아니라

해당 데이터만 서버에서 삭제하고,

사용자 화면에서도 지움으로써

네트워크로 주고받는 데이터를 최소화하고 서버와 클라이언트의 처리를 줄여주는 것이다.

글 수정(fn_replyUpdateSave)도 비슷한 코드로 구성되어 있으니

복습차원에서 확인하면 이해에 도움이 될 것이다.

정리하면

Ajax를 이용한 댓글 삭제는 서버에 삭제할 정보(JSON)를 전송하고

서버에서 삭제가 잘 진행된 뒤 (DELETE)

반환된 값이 OK이면 해당 댓글 DIV를 삭제(remove)하면 된다.