AJAX 통신 사용해보기

최근 게시판을 만들면서 ajax 통신을 처음으로 해보았다.

 

AJAX

ajax는 비동기 통신으로

JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 
약자이다. 

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

 

비동기방식이란

웹페이지를 리로드 하지 않고 데이터를 불러오는 방식이다

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데

이때 이미지, 스크립트 기타 코드 등을 모두 재요청 할 경우 불필요한 리소스 낭비가 발생하지만

비동기식 방식을 이용할 경우 필요한 부분만 불러와서 사용할 수 있다.

 

 

예시1) 

게시판에 댓글을 달았을때 댓글 데이터를 데이터베이스에 넣는 과정을 구현하였다.

 

1. 먼저 아래는 Javascript 파일에서 함수를 만들었다.

/*db에 댓글 데이터 insert*/
function replyInsert(post_pnum){
	
	//댓글 글자열 변수에 옮김
	var rep_contents =$('#rep_contents').val();
		
	//유효성 검사
	if(rep_contents == 0){
		alert("댓글을 입력하세요.")
	}else{
		
		var insertData = {
					"rep_contents" : rep_contents,
					"post_pnum" : post_pnum,
					 };
		$.ajax({
			url: "./insertBoardReply.do",
			type: "POST",
			dataType: "json",
			data: insertData,
			success: function(data){
				//저장된 댓글 불러오기
				replyList(post_pnum);
			},
			error: function(e){
				console.log(e);
			}
		});
	}
}

 

 

 

2. ajax에서 insertBoardReply와 맵핑한 컨트롤러를 불러온다.

@RequestMapping(value = "/insertBoardReply.do", method = RequestMethod.POST)
	@ResponseBody 
	public HashMap<String, Object> insertBoardReply(@ModelAttribute("boardVO") BoardVO vo, HttpSession session) throws Exception{
		HashMap<String, Object> map = new HashMap<String, Object>();
		
		//댓글 작성자 아이디 세션에서 가져오기
		String replyId=(String)session.getAttribute("Session_user_id");
		vo.setRep_user_id(replyId);
		if (vo.getRep_rnum() == 0) {
			vo.setRep_rnum(1);
		}
		
		int insertBoardReply = boardService.insertBoardReply(vo);
		
 		map.put("resultVO", insertBoardReply);
		return map;			
	}

 

 

3. vo (생략)

gettersetter

 

 

4. Service

package kr.co.negga.ntb.board.service;
import java.util.List;

/**
 * @Class BoardService.java
 * @Description 게시판 관련 서비스 Interface
 * @Since 2022.03.16
 * @author hsan
 * @version 1.0
 * @Modification 수정사항 없음 
 */
public interface BoardService {

/**
	 * 댓글을 단다.
	 * @param vo 카테고리 정보가 담긴 BoardVO
	 * @return 게시판 정보 BoardVO
	 * @exception Exception
	 */
	public int insertBoardReply(BoardVO vo) throws Exception;
}

 

5. ServiceImpl

package kr.co.negga.ntb.board.service.impl;

import java.util.List;

/**
 * @Class BoardServiceImpl.java
 * @Description 게시판 관련 서비스 구현 Class
 * @Since 2022.03.16
 * @author hsan
 * @version 1.0
 * @Modification 수정사항 없음 
 */
@Service("boardService")
public class BoardServiceImpl implements BoardService {
	
	@Resource(name = "boardMapper")
	BoardMapper boardMapper;
	/**
	 * 댓글 추가
	 * @param vo 카테고리 정보가 담긴 BoardVO
	 * @return 게시판 정보 BoardVO
	 * @exception Exception
	 */
	@Override
	public int insertBoardReply(BoardVO vo) throws Exception {
		return boardMapper.insertBoardReply(vo);
	}
}

 

6. Mapper

package kr.co.negga.ntb.board.service.impl;

import java.util.List;
/**
 * @Class BoardMapper.java
 * @Description 게시판 관련 Mapper Class(mybatis)
 * @Since 2022.03.16
 * @author hsan
 * @version 1.0
 * @Modification 수정사항 없음 
 */
@Mapper("boardMapper")
public class BoardMapper extends EgovAbstractMapper {
/**
	 * 댓글달기
	 * @param vo 카테고리 정보가 담긴 BoardVO
	 * @return 게시판 정보 BoardVO
	 * @exception Exception
	 */
	public int insertBoardReply(BoardVO vo) throws Exception {
		return insert("insertBoardReply", vo);
	}
}

 

7. SQL.xml

-> mybatis

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="kr.co.negga.ntb.board.service.impl.BoardMapper">
	<!-- 댓글 정보 DB에 추가		-->
	<insert id="insertBoardReply" parameterType="boardVO" > 
		<selectKey resultType = "int" keyProperty="rep_rnum" order="BEFORE">
			SELECT COALESCE(max(rep_rnum),0)+1 from ntb_reply
		</selectKey>
	
		INSERT INTO ntb_reply 
			(
			rep_rnum 
			, rep_regdate
			, rep_contents
			, post_pnum
			, user_id
			)
			
		VALUES 
			(
<!-- 			아래와 같이 코딩하면 중간에 값 변형 될 수 도 있음 -->
<!-- 			(select coalesce(max(rep_rnum),0)+1 from ntb_reply) -->
			#{rep_rnum} 
			, NOW()
			, #{rep_contents}
			, #{post_pnum}
			, #{rep_user_id}
			)
    </insert>
</mapper>