1. Axios(Ajax)와 서블릿을 이용한 입출력

Coding(Java)/웹프로그래밍(기초)2022. 3. 27. 20:00

1. Axios(Ajax)와 서블릿을 이용한 입출력

jsp에서 입력을 받으면 Axios를 통해 서블릿에 전달하고, 다시 서블릿으로부터 입력받은 내용을 그대로 jsp로 출력시키는 웹 프로그램을 만들고자 한다.

먼저 화면부터 만들자. STS 또는 이클립스를 열고, Dynamic Web Project를 하나 만들고(나는 이 프로젝트 이름을 01_AxiosIO로 지정했다), jsp코드를 다음과 같이 작성한다. jsp파일의 위치는 Webapp이다.

*나는 이 jsp파일의 이름을 home.jsp라고 지정했다. 즉, home.jsp의 위치는 Webapp/home.jsp이다.

이때 axios, 부트스트랩 npm과 버튼(ButtonEvt.js) 및 서블릿으로의 전송 및 출력을 받아올(StringIO.js) 자바스크립트 파일의 스크립트 소스도 작성해야 한다.

axios npm:

1

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

cs

부트스트랩 npm:

1
2
3
4
5

<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

cs

자바스크립트 경로

<script src="js/StringIO.js"></script>

<script src="js/ButtonEvt.js"></script>

자바스크립트 파일은 Webapp에 js이름의 폴더를 만들고 여기에다 저장한다.

위 그림은 본 프로그램의 패키지 익스플로어 구조이다(META-INF는 신경 쓸 필요 없다).

다음은 home.jsp코드인데 다음의 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Axios IO</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
<script src="js/StringIO.js"></script>
<script src="js/ButtonEvt.js"></script>
<style type="text/css">
.border-secondary{
    width:40%;
    margin:0 auto;
    margin-top:200px;
}
</style>
</head>
<body>
<form>
  <div class="container-fluid">
    <div class="row">
       <div class="col-md-12 wrapper">
         <div class="card border-secondary">
           <div class="card-header">
             <div class="card-title">
               <b>Axios IO Test</b>
             </div>
           </div>
           <div class="card-body">
             <div class="input-group mb-3">
                사용법: 입력창에 아무 문자를 입력한 다음 '전송' 버튼을 누르면 입력한 내용이 출력창에 출력됩니다.
             </div>
              <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="입력" name="input" id="data">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" type="button" id="answer" onclick="c(this.form)">전송</button>
                  <button class="btn btn-warning" type="button" id="answer2" onclick="d(this.form)">지우기</button>
                </div>
              </div>
              <div class="form-group mb-1">
                 <textarea class="form-control" placeholder="출력" rows="4" id="out" style="resize: none;"
                 name="output" readonly></textarea>
              </div>
           </div>
         </div>
       </div>
    </div>
  </div>
</form>
</body>
</html>
Colored by Color Scripter

cs

버튼의 작동을 위해서는 버튼태그의 jsp코드를 form태그 안 쪽에 작성해야 한다.

*이 프로그램의 작동은 input태그창에 입력하고, 그 입력한 것을 '전송'버튼을 눌러 서블릿으로 보낸 다음, 다시 '출력'창으로 출력시킨다.

다음으로 jsp와 서블릿을 이어주는 자바스크립트 파일을 만들자. 먼저 버튼에 대한 자바스크립트 파일을 만들고, 다음으로 서블릿과의 연결을 담당하는 자바스크립트 파일을 만든다.

-버튼 코드(ButtonEvt.js)

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
 * 
 */
 function c(f){
    var ins=f.input.value;
    insfunc(ins);
}
 
function d(f){
    f.input.value='';
    f.input.focus();
    return;
}

cs

-연결(입출력) 코드(StringIO.js)



1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
 * 
 */
 
   function insfunc(ins){
    console.log("입력된 문자:"+ins);
    axios.get('AnswerIO',{
        params:{'input':ins}
    }).then(response =>{
        const result=response.data;
        document.getElementById("out").innerHTML=result;
        console.log("출력");
    })
}
Colored by Color Scripter

cs


버튼코드(ButtonEvt.js)에서 함수 c(f)는 jsp의 전송 버튼으로 input태그에 입력된 내용을 insfunc로 전달하고, (StringIO.js에 있는) insfunc는 전달받은 input의 내용을 서블릿으로 전달하고, 다시 서블릿으로부터 출력내용을 전달받아 jsp로 출력시킨다. 또한 버튼코드의 함수 d(f)는 입력 칸의 입력 내용들을 지우는 함수이다.

다음으로는 서블릿을 작성한다. src/main/java에 'controller'이름의 패키지를 만들고, 그 안에다가 'AnswerIO'이름의 서블릿을 만든다. 그리고 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

package controller;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class AnswerIO
 */
@WebServlet("/AnswerIO")
public class AnswerIO extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AnswerIO() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String input=request.getParameter("input");//StringIO의 param input
        System.out.println("입력된 문자:"+input);
        
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=utf-8");//전송타입 지정
        PrintWriter s=response.getWriter();
        s.print(input);
        s.flush();//내부 버퍼의 내용을 파일에 writer, 호출하지 않으면 내용이 버퍼에만 남고 파일에 안 쓰일 수 있다.
        s.close();//스트림을 닫아 다시 파일에 쓰는 것을 불가능하게 한다. 종료된 작업에 대한 메모리 확보
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
 
}
 
Colored by Color Scripter

cs

32번 줄의 request.getParameter("input")은 StringIO.js의 insfunc가 입력받은 'input'문자를 가져와서 자바 상의 문자형 input으로 설정하고, 38번부터 40번까지의 코드는 input을 다시 자바스크립트 StringIO.js로 돌리는 역할을 한다.

작성을 완료했다면 실행을 해보자