[JS/Ajax] Ajax를 이용해서 새로고침 없이 페이지 불러오기

1. Ajax(Asynchronous JavaScript and XML) : 클라이언트와 서버간의 데이터를 비동기적 방식으로 주고받는 기술을 의미한다. 비동기 방식은 클라이언트가 요청을 보낸 후 서버가 응답을 보내기까지 기다리지않고 다음 동작을 수행할 수 있다. 따라서 서버의 처리가 완료되지 않아도 일부분의 data만 받아와 표시하면 되기 때문에 새로고침을 할 필요없이 페이지를 불러오는 ui가 가능하다.

 

---

2. Ajax & DOM node 조작을 이용해 TODO LIST 페이지 변경하기

 

TODO LIST

 

다음과 같은 TODO LIST 페이지에서 > 버튼을 누르면 새로고침없이 슬라이드를 이동시켜 일의 진행상황을 변경할 수 있도록 해보자.

먼저 메인화면 jsp 파일의 코드 일부분은 다음과 같다.

 

			<div id="${type}">
				<div class="status-list">${type}</div>
				<c:forEach var="list" items="${list}">
					<c:if test="${list.type eq type}"> 
						<div class="content">
							<h1 class="content-title">${list.title}</h1>
							<div class="content-detail">등록날짜: ${list.regdate},
							${list.name}, 우선순위 ${list.sequence }</div>
							<c:if test="${list.type ne 'done'}">
								<button id="move" onclick="moveButtonClick(${list.id}, this)">></button>
							</c:if>
							<button id="remove" onclick="removeButtonClick(${list.id}, this)">x</button>
						</div>
					</c:if>
				</c:forEach>
			</div>

 

move 버튼을 클릭하면 

1. 데이터베이스에서 todo -> doing, doing->done으로 타입을 update 한다.

2. 타입을 변경해주고 만약 타입이 done이 됐다면 > 버튼을 삭제해준다.

3. 바꿔준 타입의 리스트에 노드를 추가해준다. 

 

function moveButtonClick(id, eventNode) {      

        var xhr = new XMLHttpRequest();

        var type = eventNode.parentNode.parentNode.getAttribute("id");    

        xhr.addEventListener("load", function() {

               if(this.responseText == "success")                    

                       change(type, eventNode);       

        });    

       

        xhr.open("GET", "./TodoTypeServlet?id=" + id + "&type=" + type);      

        xhr.send();

}

 

먼저 XMLHttpRequest 객체를 생성해서, open 메소드로 요청을 준비, send 메소드로 서버에 전송한다. 서버에서 응답이 와 요청처리가 완료되면 load 이벤트가 발생하면서 콜백함수가 실행된다.

GET 요청으로 id와 type 쿼리스트링을 붙여 데이터를 전송하면 TodoTypeServlet에서 데이터베이스 update를 해준다. 

 

function change(type, eventNode) {     

        var base = eventNode.parentNode;       

        if (type === 'todo')          

               type = 'doing';

        else if (type === 'doing') {          

               type = 'done';         

               base.removeChild(eventNode);   

        }      

        var list = document.querySelector("div[id=" + type + "]");

        list.appendChild(base);

}

 

콜백함수에서 change 함수를 실행시켜 타입을 변경해주고 타입이 done이 된다면 DOM 노드 조작을 이용해 > 버튼을 삭제해준다. 노드가 변경된 타입의 리스트에 나열될 수 있도록 appendChild를 해준다.