[게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -2.9-

저번까지 다운로드, 업로드를 해보았습니다.

이번엔 비동기방식인 Ajax를 간단하게 알아보도록 하겠습니다.

List에서 다음 페이지를 볼려고할 때 페이지가 전환되는 것을 알 수 있었습니다.

그렇다면 페이지 전환없이 바로 다음 페이지를 보여줄 수 있게하면 어떨까요?

이것이 웹프로그램이 아닌 일반 어플리케이션을 보는 것과 같은 사용자 경험인 

RIA(Rich Internet Application)의 시작입니다.

이러한 기술들이 가능하기 위해 사용되는 것이 바로 AJAX(Asynchronous Javascript And XML)입니다.

AJAX는 Javscript를 이용한 비동기 통신, 클라이언트(브라우저)와 서버(웹서버)간에 XML 데이터를 주고 받는 기술입니다.

먼저 기존의 방식과 차이점을 그림으로 설명해보겠습니다.

그림 출처 : http://hieroglyph.tistory.com/13

기존 MVC패턴의 동작방식

요청페이지에서 요청을 날리면 웹서버에서 그에 맞는 액션을 한다음 그에 맞는 jsp페이지를 반환하면

사용자는 페이지가 전환되면서 응답페이지를 보게 됩니다.

AJAX를 사용한다면

그림과 같이 요청페이지에서 자바스크립트를 이용해 웹서버에 비동기요청을 보냅니다.

웹서버에서는 이 요청에 대한 액션을 실행한뒤 데이터를 반환하는데,

이때 자바스크립트에서 해당 응답을 받아서 돌아온 데이터들을 XML, JSON, TEXT등의 형식으로 받아서

요청 페이지의 DOM을 조작해 데이터를 보여주는 것으로 페이지 전환없이 요청에 대한 응답이 끝나게 됩니다.

간단히 말해 AJAX는 페이지 전환이 없는 웹 동작방식인겁니다.

AJAX를 이용해 실습해볼건 List에서 다음 페이지로 페이지 전환이 되는게 아니라 아래에 이어서 쭉쭉 나오게 하는것으로 실습해보겠습니다.

그러기위해서 Jquery를 사용할건데, 해드태그가 끝나기전 다음 구문을 입력해주세요. (List.jsp에)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

그리고 다음페이지를 누르면 잘 요청되는지 확인을 위해 다음 구문을 넣어줍시다.

<fmt:parseNumber value="${page/10+1 }" type="number"  integerOnly="True" /> 페이지

<c:if test="${fn:length( articleList ) < 10}"> 

<a href="#">다음페이지</a>

</c:if>

<c:if test="${fn:length( articleList ) >= 10}"> 

<a href="#" onclick="loadNextPage('${page+10}')">다음페이지</a>

</c:if>

<script>

function loadNextPage(page){

var param = "page="+page;

$('#append_article').load("list.do", param, function(data){

alert(data);

});

}

</script>

<a href="write.jsp">글쓰기</a>

href = "#"은 현재페이지이며, 클릭을 하면 loadNextPage라는 함수를 실행하게 됩니다.

loadNextPage에서는 페이지를 파라미터로 받고 jquery의 selector를 이용해 위에 만든 div태그를 선택한뒤 .load함수를 

실행하게 됩니다. 세번째 인자값으로 응답 함수에 요청이 완료되어 돌아온 값을 alert으로 출력을 합니다.

한번 실행결과를 봅시다.

아래에 무언가가 하나더 생기고 alert으로 요청 값이 넘어가서 반환되는 jsp페이지가 그대로 출력되는것을 알 수 있습니다.

아 load 함수는 jquery에서 내부적으로 ajax요청이 구현되어 있는 함수입니다.

그런데 우리는 위의 결과처럼 전체 jsp페이지를 원하는게 아니고 안에 내용만 추가되는 것을 원합니다.

그래야 부하도 덜 걸리고 좀 더 깔끔해 보이겠죠.

이를 위해 ajax요청에 대비한 Action을 만들어야겠습니다.

url은 ajaxList.do

클래스 명은 AjaxListAction

AjaxListAction을 사용할려면 Command.propertis에 등록해야겠죠? 입력해줍시다.

그리고 AjaxListAction을 만들고, ListAction과 유사하기때문에 복사 붙여넣기뒤 조금 수정을 하였습니다.

그리고 데이터를 뿌려줄 ajaxList.jsp를 만들었구요. 그럼 ajaList.jsp파일을 생성해줍니다.

생성하는데 기존에 있는 body나 head부분을 다 지워주고 위의 내용만 넣을 수 있도록 합시다.

List.jsp에서 는 함수를 추가해주고요. 

<input type="hidden" name="page" id="page value="${page}"/>

는 페이지가 최초로 호출되어있을 때 딱히 보여주는게 없으므로 hidden으로 둡니다.

ajax 요청이 끝나면 페이지의 값이 변화 해야하는데

요청시에는 jquery를 통해 page input태그에 접근해 해당 input태그로부터 값을 불러와 요청을 합니다.

페이지가 로드되고 게시글들이 테이블에 append된 이후에 이때 page의 값을 마찬가지로

jquery를 통해 page input태그에 접근하여 값을 갱신합니다.

이렇게 다음 게시글을 계속 불러올때도 page에서 10이 더해져 리스트를 출력하게 됩니다.

이번에 사용한 함수는 jquery에서 ajx를 쉽게 사용할 수 있도록 구현된 ajax함수입니다.

사용법은 load함수와 유사합니다.

간단하게 ajax가 어떻게 구동되는지 알아보았습니다.

http://cusmaker.tistory.com/114

위의 블로그에서 대부분의 내용을 차용하였으며, 많은 공부가 되었습니다.

JSP_oracle10.zip