Spring 0710

이제 무한 스크롤을 써볼건데

BoardController

	@ResponseBody
	@GetMapping("BoardListJson")
	public String listJson(
			@RequestParam(defaultValue = "") String searchType, 
			@RequestParam(defaultValue = "") String searchKeyword, 
			@RequestParam(defaultValue = "1") int pageNum, 
			Model model,
			HttpServletResponse response) {

		int listLimit = 10; // 한 페이지에서 표시할 목록 갯수 지정
		int startRow = (pageNum - 1) * listLimit; // 조회 시작 행(레코드) 번호
		List<BoardVO> boardList = service.getBoardList(searchType, searchKeyword, startRow, listLimit);

//		// 한 페이지에서 표시할 페이지 목록(번호) 계산
		int listCount = service.getBoardListCount(searchType, searchKeyword);
//		System.out.println("전체 게시물 수 : " + listCount);
		
		// 2. 전체 페이지 목록 갯수 계산
		int maxPage = listCount / listLimit + (listCount % listLimit > 0 ? 1 : 0);
//		System.out.println("전체 페이지 목록 갯수 : " + maxPage);

		// 최대 페이지번호(maxPage)값도 JSON 데이터로 함께 넘기려면
		// 기존 목록을 JSONObject 객체를 통해 객체 형태로 변환하고, 최대 페이지번호도 함께 추가
		JSONObject jsonObject = new JSONObject();
		// JSONXXX 객체의 put() 메서드를 사용하여 데이터 추가 가능
		jsonObject.put("boardList", boardList);
		jsonObject.put("maxPage", maxPage);
		
//		System.out.println(jsonObject);
		
		return jsonObject.toString();
	}

	JSONObject jsonObject = new JSONObject(); 
    - 기존 목록을 JSONObject 객체를 통해 객체 형태로 변환하고, 최대 페이지번호도 함께 추가
    - JSONXXX 객체의 put() 메서드를 사용하여 데이터 추가 가능
    jsonObject.put("boardList", boardList);
    
	jsonObject.put("maxPage", maxPage);
    
    return jsonObject.toString();

이렇게 코드를 추가 하고

board_list_ajax.jsp

<script type="text/javascript">
	// AJAX + JSON 을 활용한 게시물 목록 조회(무한스크롤 기능 포함)
	let pageNum = 1; // 기본 페이지 번호 미리 저장
	let masPage = 1; // 최대 페이지 번호 미리 저장
	
	$(function() {
		let searchType = $("#searchType").val();
		let searchKeyword = $("#searchKeyword").val();
		
		loadList(searchType, searchKeyword);
		
		$(window).on("scroll", function() {
			let scrollTop = $(window).scrollTop();
			let windowHeight = $(window).height();
			let docummentHeight = $(document).height();
			
			let x = 1;
			if(scrollTop + windowHeight + x >= documentHeight) {
				
				if(pageNum < maxPage) {
					pageNum++;
					loadList(searchType, searchKeyword);
				} else {
					alert("다음 페이지가 없습니다");
				}
			}
			
		});

	});
	
	function loadList(searchType, searchKeyword) {
		let url;
		
		url = "BoardListJson?pageNum=" + pageNum + "&searchType=" + searchType + "&searchKeyword=" + searchKeyword;
		
		$.ajax({
			type: "GET",
			url: url,
			dataType: "json",
			success: function(data) {
				maxPage = data.maxPage;
				for(board of data.boardList) {
					let space = "";
					if(board.board_re_lev > 0) {
						for(let i = 0; i < board.board_re_lev; i++) {
							space += "&nbsp;&nbsp;";
						}
						
						space += "<img src='${pageContext.request.contextPath }/resources/images/re.gif'>";
					}
					
					let item = "<tr height='50'>"
								+ "<td>" + board.board_num + "</td>" 
								+ "<td id='subject'>"
									+ space
									+ "<a href='BoardDetail?board_num=" + board.board_num + "'>"
									+ board.board_subject 
									+ "</a>"
								+ "</td>" 
								+ "<td>" + board.board_name + "</td>" 
// 								+ "<td>" + board.board_date + "</td>" 
								+ "<td>" + getFormatDate(board.board_date) + "</td>" 
								+ "<td>" + board.board_readcount + "</td>" 
								+ "</tr>"
					$("table").append(item);
				}
				
			},
			error: function() {
				alert("글 목록 요청 실패!");
			}
		});
		
	}
	
	function getFormatDate(date) { // 문자열로 된 날짜 및 시각 데이터 전달받기
		let targetDate = /(\d\d)(\d\d)-(\d\d)-(\d\d)\s(\d\d):(\d\d):(\d\d).(\d)/g;
		let formatDate = "$2-$3-$4 $5:$6";
		return date.replace(targetDate, formatDate); // 전달받은 날짜 및 시각을 지정된 형식으로 변환하여 리턴
	}
</script>

	loadList(searchType, searchKeyword);
    - 웹브라우저의 스크롤바가 바닥에 닿으면 다음 목록 조회를 위해 loadList() 함수 호출

       	1. window 객체와 document 객체를 활용하여 스크롤 관련 값 가져와서 제어
			 => 스크롤바의 현재 위치, 문서가 표시되는 창(window)의 높이, 문서 전체 높이
        	let scrollTop = $(window).scrollTop(); // 스크롤바 현재 위치
			let windowHeight = $(window).height(); // 브라우저 창의 높이
			let documentHeight = $(document).height(); // 문서의 높이(창의 높이보다 크거나 같음)

         2. 스크롤바 위치값 + 창 높이 + x 가 문서 전체 높이(documentHeight) 이상일 경우
		    다음 페이지 게시물 목록 로딩하여 목록 하단에 추가
		    => 이 때, x 는 스크롤바의 바닥으로부터의 여유 공간
		     (즉, x가 클 수록 스크롤바를 더 적게 내려도 다음 목록 로딩)
		     (만약, x = 1 이면 스크롤바가 바닥에 닿아야만 다음 목록 로딩됨)
        	let x = 1;

        if(pageNum < maxPage) {
				pageNum++;
				loadList(searchType, searchKeyword);
			} else {
				alert("다음 페이지가 없습니다");
			}

			 최대 페이지번호를 초과하면 다음 페이지 로딩 요청하지 않도록 처리
			 => pageNum 값이 maxPage 보다 작을 동안 페이지번호 증가하면서 다음 페이지 로딩

		maxPage = data.maxPage;
        - 무한스크롤 다음 페이지 로딩 과정에서 페이지번호와 비교 시 활용

이렇게 추가하면 무한스크롤 완성