TIL #38 - AJax를 이용한 구구단 출력
아래와 같이 단을 입력하면 그에 맞는 구구단을 출력하는 프로그램이다.
만들 파일은 단을 입력받고 출력까지를 하는 html, 그리고 그 단을 받아 구구단 연산을 하고 값을 다시 html에게 넘겨줄 jsp 두개이다.
단, 구구단 값은 <div> 태그 안에서 출력하는데
단을 출력할 때까지는 보이지 않다가 이벤트 발생시에 데이터가 등장하도록
innerHTML 속성을 사용해 화면 변경을 한다.
따라서 alert을 이용해 값을 출력하지 않는 것이다.
먼저 html 이다.
gugudan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단</title>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="dan" placeholder="단 입력">
</td>
<td>
<input type="button" value="결과" onclick="gugudanRequest()">
</td>
</tr>
</table>
<div id="result"></div>
</body>단을 입력하고 결과값을 출력받을 html 파일이다.
먼저 단을 입력받는 input 태그에 id를 dan으로 주고, 결과 버튼을 눌렀을 시에 gugudanRequest() 라는 자바스크립트 함수가 발생하도록 해둔다.
구구단의 결과가 발생할 <div> 태그에는 result 라는 id 값을 준다.
아래는 html 파일 내의 javascript 내용이다.
<script type="text/javascript">
let httpRequest = null;
function gugudanRequest(){
let dan = document.getElementById("dan").value;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = gugudanRequestFromServer;
httpRequest.open("GET", "getGugudan.jsp?dan="+dan, true);
httpRequest.send();
}위의 gugudanRequest() 는 아래의 순서대로 작업을 진행한다.
1. 사용자가 입력한 dan 값을 추출해 dan 변수에 따로 담아둔다.
2. 사용자가 이벤트를 발생시키면 (출력 버튼을 누르면) 이벤트 처리 함수를 호출한다.
3. 이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 함수를 호출한다.
4. XMLHttpRequest 객체의 send() 함수가 호출되면 웹서버에 요청이 전송된다.
5. 웹서버는 요청에 따라 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.
6. XMLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티에 지정한 콜백 함수(gugudanRequestFromServer) 를 호출한다.
아래는 onreadystatechange 프로퍼티에 지정한 콜백함수인 gugudanRequestFromServer() 이다.
function gugudanRequestFromServer(){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
result.innerHTML = httpRequest.responseText; // result 값 가져오기
}else {
alert(httpRequest.status);
}
}
}
</script>
</html>콜백함수를 통해서 서버로부터 응답이 도착했을 때 요청이 성공적으로 수행되었는지 확인한다.
확인을 위해 status 프로퍼티를 이용하는데 if문을 걸어 제대로 수행되었을 때 알맞는 수행을 한다.
위의 코드에서는 요청이 성공적으로 수행되어서 status 값이 200이라면
결과를 보여줄 <div>의 id 값 result 에 innerHTML 속성을 통해 결과를 뿌려준다.
innerHTML 속성은 alert와 달리 화면 상의 내용이 바뀔 때 새로운 내용이 추가되도록 할 수 있다.
즉, 화면의 동적변경이 가능한 것이다.
innerHTML을 이용했기 때문에 어떤 단을 입력하더라도 그에 맞는 구구단을 확인할 수 있다.