AJAX로 댓글 기능 구현

순서:

1) List 기능(컨트롤러, AJAX, 콜백 함수 순)

2) Delete 기능

3) Insert 기능

1) List 기능

ㄱ. 컨트롤러

list 기능만 구현하는 것은 굉장히 간단하다.

<CommentsRestController.java>

@RequestMapping("/list/{board_num}")
    public List<Comments> list(@PathVariable("board_num") int board_num){
        List<Comments> list = dao.list(board_num);
        return list;
    }

하지만 예외처리를 위해서 HttpStatus도 보내려면

Map에 넣어서 같이 보내야 한다.

@RequestMapping("/list/{board_num}")
    public ResponseEntity<Map<String,Object>> list(@PathVariable("board_num") int board_num){
        //ResponseEntity 쓰면 list는물론 HttpStatus(접속 상태)도 같이 보낼 수 있다.
        ResponseEntity<Map<String,Object>> entity = null;
        try{
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("list", dao.list(board_num));
            entity = new ResponseEntity<Map<String,Object>>(map,HttpStatus.OK);
        }catch(Exception e){
            entity = new ResponseEntity<Map<String,Object>>(HttpStatus.BAD_REQUEST);
        }
        return entity;
    }

ㄴ. AJAX

<Comments.jsp>

//화면 로드시 실행될 메소드
window.onload = function(){
   loadComments();
}

TIP) JSON은 TEXT 형식으로 Response되므로

다시 JSON.parse해주어야 한다.

var contextPath ="${requestScope['javax.servlet.include.context_path']}";
var loadComments = function(){//ajax 구현
   var http;
   var url = contextPath+"/comments/list/"+${param.board_num};
   if(window.XMLHttpRequest){
      http=new XMLHttpRequest();
   }else if(window.ActiveXObject){
      http=new ActiveXObject("Microsoft.XMLHTTP");
   }
   http.onreadystatechange = function(){
      if(this.readyState==4 && this.status==200){
         var comlist = JSON.parse(this.responseText);
         commmentList(comlist["list"]);
         //컨트롤러에서 보내온 BAD_REQUEST(400)을 받는다.
      }else if(this.status == 400){
          alert("comments를 읽어오지 못했습니다.");
      }
   }
   http.open("GET",url,true);
   http.send();
}

ㄷ. 콜백 함수

function commmentList(comlist){
   var tableList = document.querySelector("#commentsList .list");
   var htmlList = "";
   for(var i=0;i<comlist.length;i++){
      htmlList +="<tr>";
      htmlList +="<td>"+comlist[i]["num"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_num"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_id"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_name"]+"</td>";
      htmlList +="<td>"+comlist[i]["content"]+"</td>";
      htmlList +="<td>"+comlist[i]["indate"]+"</td>";
      htmlList +="<td><a href='javascript:deleteComments("+comlist[i]["num"]+")'>삭제</a></td>";
      htmlList +="</tr>";
   }
   tableList.innerHTML = htmlList;
}

2) Delete 기능

ㄱ. 컨트롤러

삭제 기능은 삭제 성공인지 실패인지 알려주는

int delete만 'JSON 형태'로 반환하면 된다.

예) {"id":"obama","checkId":true}

<CommentsRestController.java>

@RequestMapping("/delete/{num}")
    public String delete(@PathVariable("num") int num){
        int delete= 0;
        delete = dao.deleteComments(num);
        return "{\"delete\":"+delete+"}";
    }

ㄴ. AJAX

삭제 성공 여부만 alert로 띄워준다.

<Comments.jsp>

var deleteComments = function(num){
       var http;
       if(window.XMLHttpRequest){
              http=new XMLHttpRequest();
           }else if(window.ActiveXObject){
              http=new ActiveXObject("Microsoft.XMLHTTP");
           }
       var url = contextPath+"/comments/delete/"+num;
       http.onreadystatechange = function(){
          if(this.readyState==4 && this.status==200){
             var deleteJson = JSON.parse(this.responseText);
             if(deleteJson["delete"]>0){
                 alert("삭제 성공");
                 loadComments(); //list 호출
             }else{
                 alert("삭제 실패");
             }
          }
       }
       http.open("GET",url,true);
       http.send();
       console.log("통신완료!");
    }

3) Insert 기능

ㄱ. 컨트롤러

delete와 마찬가지로 Insert 성공 여부만

'JSON 형태'로 반환해주면 된다.

<CommentsRestController.java>

@RequestMapping(value="/insert.do")
    public String insert(Comments comments){
        int insert = 0;
        insert = dao.insertComments(comments);
        return "{\"insert\":"+insert+"}";
    }

ㄴ. AJAX

<Comments.jsp>

var insertComments = function(formVal){
       var http;
       if(window.XMLHttpRequest){
              http=new XMLHttpRequest();
           }else if(window.ActiveXObject){
              http=new ActiveXObject("Microsoft.XMLHTTP");
           }
       //url 묶음(content만 퍼센트 인코딩)
       var url = contextPath+"/comments/insert.do";
       url+= "?board_num="+${param.board_num};
       url+= "&mem_num="+${loginVo.num};
       url+= "&content="+encodeURIComponent(formVal.content.value);
       
       http.onreadystatechange = function(){
          if(this.readyState==4 && this.status==200){
             var insertJson = JSON.parse(this.responseText);
             if(insertJson["insert"]>0){
                 alert("저장 성공");
                 loadComments();
             }else{
                 alert("저장 실패");
             }
          }
       }
       http.open("GET",url,true);
       http.send();
    }