BackEnd/WEB

AJAX_국비DAY64

Leo.K 2022. 5. 31. 16:38

웹 브라우저에 내장된 ajax객체가 서버에서 오는 상태정보를 지속적으로 callback함수에게 전달한다.

404 : 페이지를 찾을 수 없을 때 나타나는 오류 

500 : 서버 내부 문법 오류

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({ 
    type:'GET',
    url :'calc.do'
    data:{'su1':su1, 'su2':su2, 'op':op},/* 전달인자(param -> JSON형식으로 작성) */ 
    success:function(result_data){
        $("#result").val(result_data);
        
    },
    error: function(err){
        alert(err.status);
    }
});
cs

type, url, data = 서버로 전송하는 전달인자 

success = 서버로부터 성공적으로 수신한 경우(4, 200) 서버로부터 전달받는 정보를 전달할 callback함수 

result_data = 결과인자, 서버로부터 수신한 인자

error = ajax객체가 수신한 정보가 에러인 경우 처리할 함수

 

[jQuery ajax 실습1. 구구단]

[input.html]

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
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- JQuery 라이브러리 연결 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<style type="text/css">
    #disp{
        width: 120px;
        margin-top:50px;
        border: 1px solid red;
    }
</style>
 
<script type="text/javascript">
    var regex_gugudan = /^[0-9]{1}$/;
 
    /* jQuery 초기화(브라우저에 요소들의 배치가 완료되면 실행할 함수) */
    //$(document).ready(function(){});
    $(function(){
        
        //버튼 클릭시 
        $("#btn_result").click(function(){
            
            var dan = $("#dan").val();
            if(regex_gugudan.test(dan)==false){
                alert('2-9사이의 정수만 입력하세요');
                $("#dan").val('2');
                $("#dan").focus();
                return;
            }
            
            
            //jQuery Ajax로 요청
            $.ajax({
                url    :'gugudan_result.jsp',
                data   :{'dan':dan},    //gugudan_result.jsp?dan=5
                success:function(result_data){
                    
                    //result_data : 서버로부터 응답된 데이터
                    console.log(result_data);
                    $("#disp").html(result_data);
                },
                error  :function(err){
                    alert(err.responseText);
                }
            });
            
        });
    });
</script>
</head>
<body>
단:<input id="dan">
   <input type="button" value="보여줘" id="btn_result">
<br>
<div id="disp"></div>
</body>
</html>
cs

[gugudan.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table class="table table-striped">
    <tr class="success">
        <th>${param.dan }단 보기</th>
    </tr>
    
    <c:forEach var="i" begin="1" end="9">
        <tr>
            <td>${param.dan } x ${i} = ${param.dan*i }</td>
        </tr>
    </c:forEach>
</table>
</body>
</html>
cs

 

 

[jQuery ajax 실습2. 주민번호]

[input4_jumin.html]

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<!-- JQuery 라이브러리 연결 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<script type="text/javascript">
 
regex = /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[0-9][0-9]{6}$/;
 
/* jQuery초기화 */
$(function(){
    //버튼 클릭시
    $("#btn_submit").click(function(){
        
        var jumin = $("#jumin").val();
        
        if(regex.test(jumin)==false) {
            alert('올바르지 않은 주민번호 형식입니다.');
            $("#jumin").val('');
            $("#jumin").focus();
            return;
        }
        
        $.ajax({
            url     :'jumin.do',
            data    :{'jumin':jumin},
            dataType: 'json',                        /* 수신할 데이터의 타입을 지정해준다. */
            success :function(res_data){
                //res_data = {"year":1980,"ganji":"경신년","age":43,"tti":"원숭이","gender":"남자","season":"겨울","local":"경기도","bValid":true};
                $("#year").html(res_data.year + "("+ res_data.ganji +")");
                $("#age").html(res_data.age + "(살)");
                $("#tti").html(res_data.tti);
                $("#gender").html(res_data.gender);
                $("#season").html(res_data['season']);
                $("#local").html(res_data.local);
            },
            error   :function(err){
                alert(err.responseText);
            }
            
        });
    });
});
 
</script>
 
<style type="text/css">
    #box{
        width: 300px;
        border: 1px solid blue;
        margin-top: 10px;
        box-shadow: 1px 1px 2px black;
    }
</style>
</head>
<body>
<hr>
주민번호:<input id="jumin">
         <input id="btn_submit" type="button" value="결과">
<hr>
 
<div id="box">
    <table    class="table table-striped table-hover">
        <tr>
            <th>출생년도</th>
            <td><span id="year"></span></td>
        </tr>
        <tr>
            <th>나이</th>
            <td><span id="age"></span></td>
        </tr>
        <tr>
            <th></th>
            <td><span id="tti"></span></td>
        </tr>
        <tr>
            <th>성별</th>
            <td><span id="gender"></span></td>
        </tr>
        <tr>
            <th>계절</th>
            <td><span id="season"></span></td>
        </tr>
        <tr>
            <th>지역</th>
            <td><span id="local"></span></td>
        </tr>
        
    </table>
</div>
</body>
</html>
cs

[juminAction -> json직접 포장]

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import myutil.JuminNumber;
 
/**
 * Servlet implementation class JuminAction
 */
@WebServlet("/jumin.do")
public class JuminAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        
        // /jumin.do?jumin=801212-1234560
        
        
        //1. 수신 인코딩 설정 
        response.setCharacterEncoding("utf-8");
        
    
        //2. 주민번호 받기 
        String jumin = request.getParameter("jumin");
        
        //3. 부가정보 추출 
        JuminNumber j = new JuminNumber();
        j.setJumin_no(jumin);
        
        int    year      = j.getYear();
        String ganji     = j.getGanji();
        int    age       = j.getAge();
        String tti       = j.getTti();
        String gender    = j.getGender();
        String season    = j.getSeason();
        String local     = j.getLocal();
        boolean bValid   = j.isValid();
        
        //JSON으로 포장 -> JS에서는 문자열을 ''로 감싸도 되지만 자바에서는 character로 인식하기 때문에 주의하자 
        //{"year":2022, "bValid":true}
        StringBuffer sb = new StringBuffer("{");
        
        sb.append(String.format("\"year\":%d,", year));
        sb.append(String.format("\"ganji\":\"%s\",", ganji));
        sb.append(String.format("\"age\":%d,", age));
        sb.append(String.format("\"tti\":\"%s\",", tti));
        sb.append(String.format("\"gender\":\"%s\",", gender));
        sb.append(String.format("\"season\":\"%s\",", season));
        sb.append(String.format("\"local\":\"%s\",", local));
        sb.append(String.format("\"bValid\":%b", bValid));
        
        
        sb.append("}");
        
        
        //응답
        response.setContentType("text/json; charset=utf-8;");
        //전송
        response.getWriter().print(sb.toString());
    }
 
}
 
 
cs

[juminAction -> json라이브러리 사용하여 포장]

라이브러리 다운로드 방법

  1. 여기에 접속한다.
  2.  json-simple을 검색한다. 
  3. 가장 위에 있는 라이브러리를 선택한다.
  4. 1.1버전을 jar파일로 다운로드 받는다. 
  5. 다운로드 받은 라이브러리를 라이브러리를 적용시킬 프로젝트에 WEB-INF 하위 lib폴더에 복사한다.
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.json.simple.JSONObject;
 
import myutil.JuminNumber;
 
 
/**
 * Servlet implementation class JuminAction
 */
@WebServlet("/jumin2.do")
public class JuminAction2 extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        
        // /jumin.do?jumin=801212-1234560
        
        
        //1. 수신 인코딩 설정 
        response.setCharacterEncoding("utf-8");
        
    
        //2. 주민번호 받기 
        String jumin = request.getParameter("jumin");
        
        //3. 부가정보 추출 
        JuminNumber j = new JuminNumber();
        j.setJumin_no(jumin);
        
        int    year      = j.getYear();
        String ganji     = j.getGanji();
        int    age       = j.getAge();
        String tti       = j.getTti();
        String gender    = j.getGender();
        String season    = j.getSeason();
        String local     = j.getLocal();
        boolean bValid   = j.isValid();
        
        //JSON으로 포장 -> JS에서는 문자열을 ''로 감싸도 되지만 자바에서는 character로 인식하기 때문에 주의하자 
        //{"year":2022, "bValid":true}
        
        JSONObject json = new JSONObject();
        json.put("year", year);
        json.put("ganji", ganji);
        json.put("age", age);
        json.put("tti", tti);
        json.put("gender", gender);
        json.put("season", season);
        json.put("local", local);
        json.put("bValid", bValid);
        
        
        String json_str = json.toJSONString();
        
        //응답
        response.setContentType("text/json; charset=utf-8;");
        //전송
        response.getWriter().print(json_str);
    }
 
}
 
 
cs

[만들어 놓은 jumin라이브러리]

더보기
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
package myutil;
 
import java.util.Calendar;
 
public class JuminNumber {
 
    private String jumin_no;
 
    public String getJumin_no() {
        return jumin_no;
    }
 
    public void setJumin_no(String jumin_no) {
        this.jumin_no = jumin_no;
    }
 
    // 01234567890123 <- index
    // jumin_no = "801212-1234560";
 
    // 출생년도
    public int getYear() {
 
        // 2자리 년도 추출
        String str_year = jumin_no.substring(02); // "80"
        int year = Integer.parseInt(str_year); // "80" -> 80
 
        // 성별 정보 구한다
        char gender = jumin_no.charAt(7);
 
        if (gender == '1' || gender == '2' || gender == '5' || gender == '6')
            year += 1900;
        else if (gender == '3' || gender == '4' || gender == '7' || gender == '8')
            year += 2000;
        else
            year += 1800;
 
        return year;
    }
 
    // 나이
    public int getAge() {
        // 현재날짜 구하기
        Calendar c = Calendar.getInstance();
        // 나이 = 현재년도 - 출생년도 + 1
        int age = c.get(Calendar.YEAR) - this.getYear() + 1;
        return age;
    }
 
    // 12간지
    // 4 5 6 7 8 9 10 11 0 1 2 3 <- Tti index
    // 자 축 인 묘 진 사 오 미 신 유 술 해
    // 쥐 소 범 토 용 뱀 말 양 숭 닭 개 돼
 
    // 띠
    public String getTti() {
        // tti_index = 출생년도 % 12; // 0~11
        int tti_index = this.getYear() % 12;
        switch (tti_index) {
        case 0:
            return "원숭이";
        case 1:
            return "닭";
        case 2:
            return "개";
        case 3:
            return "돼지";
        case 4:
            return "쥐";
        case 5:
            return "소";
        case 6:
            return "호랑이";
        case 7:
            return "토끼";
        case 8:
            return "용";
        case 9:
            return "뱀";
        case 10:
            return "말";
        default:
            return "양";
        }
    }
 
    /*
     * 
     * 남자 여자 내국인 외국인 내국인 외국인 1800 9 0 1900 1 5 2 6 2000 3 7 4 8
     * 
     */
    // 성별
    public String getGender() {
        //방법 1
        char gender = jumin_no.charAt(7);
        if (gender == '1' || gender == '3' || gender == '5' || gender == '7' || gender == '9')
            return "남자";
        else
            return "여자";
        /*방법 2
        char gender = jumin_no.charAt(7);
        if ((gender-'0')%2==1)
            return "남자";
        else
            return "여자";
        */
    }
 
    // 지역
    public String getLocal() {
        int localNumber = Integer.parseInt(jumin_no.substring(810));
        if (localNumber >= 0 && localNumber <= 8)
            return "서울";
        else if (localNumber >= 9 && localNumber <= 12)
            return "부산";
        else if (localNumber >= 13 && localNumber <= 15)
            return "인천";
        else if (localNumber >= 16 && localNumber <= 25)
            return "경기도";
        else if (localNumber >= 26 && localNumber <= 34)
            return "강원도";
        else if (localNumber >= 35 && localNumber <= 39)
            return "충청북도";
        else if (localNumber == 40)
            return "대전";
        else if (localNumber >= 41 && localNumber <= 47) {
            if (localNumber == 44)
                return "세종";
            return "충청남도";
        } else if (localNumber >= 48 && localNumber <= 54)
            return "전라북도";
        else if (localNumber >= 55 && localNumber <= 56)
            return "광주";
        else if (localNumber >= 57 && localNumber <= 66)
            return "전라남도";
         else if (localNumber >= 67 && localNumber <= 70)
            return "대구";
        else if (localNumber >= 71 && localNumber <= 81)
            return "경상북도";
 
        else if (localNumber >= 82 && localNumber <= 90) {
            if (localNumber == 85)
                return "울산";
            return "경상남도";
        } else if (localNumber >= 91 && localNumber <= 95)
            return "제주";
        else if (localNumber == 95)
            return "세종";
        return "잘못된 지역번호";
    }
 
    // 계절
    public String getSeason() {
        int str_month = Integer.parseInt(this.jumin_no.substring(24));
        /*
         * 방법 1) switch (str_month) { case 3: case 4: case 5: return "봄"; case 6: case
         * 7: case 8: return "여름"; case 9: case 10: case 11: return "가을"; default:
         * return "겨울"; }
         */
 
        // 방법 2)
        switch (str_month / 3) {
        case 1:
            return "봄";
        case 2:
            return "여름";
        case 3:
            return "가을";
        default:
            return "겨울";
        }
    }
 
    // 간지
    public String getGanji() {
        int year = this.getYear();
 
        // 방법 1)
        String str_gan[] = { "경""신""임""계""갑""을""병""정""무""기" };
        String str_ji[] = { "신""유""술""해""자""축""인""묘""진""사""오""미" };
        String ganji = String.format("%s%s년", str_gan[year % 10], str_ji[year % 12]);
 
        return ganji;
 
        /*
         * //방법 2) String gan = "임"; String ji = "인";
         * 
         * //gan 선택 //10간 switch (year % 10) { case 0: gan = "경"; break; case 1: gan =
         * "신"; break; case 2: gan = "임"; break; case 3: gan = "계"; break; case 4: gan =
         * "갑"; break; case 5: gan = "을"; break; case 6: gan = "병"; break; case 7: gan =
         * "정"; break; case 8: gan = "무"; break;
         * 
         * default: gan = "기"; break; } //ji 선택 // 12지 switch (year % 12) { case 0: ji =
         * "신"; break; case 1: ji = "유"; break; case 2: ji = "술"; break; case 3: ji =
         * "해"; break; case 4: ji = "자"; break; case 5: ji = "축"; break; case 6: ji =
         * "인"; break; case 7: ji = "묘"; break; case 8: ji = "진"; break; case 9: ji =
         * "사"; break; case 10: ji = "오"; break; default: ji = "미"; break; }
         * 
         * //문자열 결합식 String ganji = String.format("%s%s년", gan, ji); return ganji;
         */
    }
 
    // 유효성 체크
    public boolean isValid() {
        int sum = 0;
        sum = sum + (jumin_no.charAt(0-'0'* 2;
        sum = sum + (jumin_no.charAt(1-'0'* 3;
        sum = sum + (jumin_no.charAt(2-'0'* 4;
        sum = sum + (jumin_no.charAt(3-'0'* 5;
        sum = sum + (jumin_no.charAt(4-'0'* 6;
        sum = sum + (jumin_no.charAt(5-'0'* 7;
        //- 건너뛰고
        sum = sum + (jumin_no.charAt(7-'0'* 8;
        sum = sum + (jumin_no.charAt(8-'0'* 9;
        sum = sum + (jumin_no.charAt(9-'0'* 2;
        sum = sum + (jumin_no.charAt(10)-'0'* 3;
        sum = sum + (jumin_no.charAt(11)-'0'* 4;
        sum = sum + (jumin_no.charAt(12)-'0'* 5;
        
        sum = sum%11;
        sum = 11-sum;
        sum = sum%10;    //0-9
        
        System.out.println(sum);
        
        //주민번호 마지막 자리 숫자
        int last_no = jumin_no.charAt(13)-'0';
        
        if (sum == last_no)
            return true;
        else
            return false;
        
        /* 유효성
        //자릿수 입력 체크 
        if(jumin_no.length() > 14) {
            System.out.println("[형식오류] \'-\' 포함 14자리를 입력하세요."); 
            return false; 
        } 
          //숫자 입력체크 
        char ch; 
        for(int i =0; i<jumin_no.length();i++) {
            ch = jumin_no.charAt(i);
            if (ch == '-')
                continue;
            if (!(ch >= '0' && ch <= '9')) {
                System.out.println("[형식오류] -를 제외한 문자는 입력할 수 없습니다. 형식에 맞도록 입력하세요."); 
                  return false; 
              }
        }
        */
        
        
        /*
        방법 1) 배열
        String jumin = jumin_no.replaceAll("-", "");
        jumin = jumin.trim();
        
        int index[] = new int[13];
        String tmp[] = jumin.split("");
        
        for(int i=0; i < index.length; i++) {
            index[i] = Integer.parseInt(tmp[i]);
        }
        
        int check[] = {2,3,4,5,6,7,8,9,2,3,4,5};
        int sum = 0;
        
        for(int i=0; i<12;i++) {
            sum += index[i] * check[i];
        }
        if (index[12] == ((11 - sum%11)%10))
            return true;
        else
            return false;
        */
        
        /*
        //방법 2) 스트링 클래스 사용
        String check = "234567-892345";
        int sum=0;
        for(int i=0; i<13;i++) {
            if(i==6)
                continue;
            sum += (jumin_no.charAt(i)-'0')*(check.charAt(i)-'0');
        }
        if((jumin_no.charAt(13)-'0') == ((11 - sum%11)%10))
            return true;
        else
            return false;
        */
    }
    public boolean isValid2() {
        int sum = 0;
        int check_su = 2;
        
        for(int i=0;i<13;i++) {
            if (i == 6continue//건너뛴다.
            sum = sum + (jumin_no.charAt(i) -'0'* check_su;
            check_su++;
            if(check_su>9)    check_su = 2;    
        }
        
        //System.out.println(sum);
        
        sum = (11-sum%11)%10;
        
        //sum = sum%11;
        //sum = 11-sum;
        //sum = sum%10;    //0-9
        
        System.out.println(sum);
        
        //주민번호 마지막 자리 숫자
        int last_no = jumin_no.charAt(13)-'0';
        
        if (sum == last_no)
            return true;
        else
            return false;
    }
 
}
 
cs

 

Dynaminc Web Project를 복사하는 방법 

그냥 복붙 하면 context name이 겹치기 때문에 에러가 발생한다. 

  1. 복사 하려는 프로젝트를 export하여 war파일을 생성한다. 이때, 반드시 export source file을 체크해야만 소스 폴더 파일이 정확하게 포함되어 war파일로 압축된다. 
  2. project explorer에서 마우스 우클릭 -> import를 누른 후에 위에서 저장한 war파일을 선택하고 프로젝트 이름만 바꾸어서 생성하면 성공적으로 다이나믹 프로젝트 폴더를 복사 할 수 있다.

[ajax를 사용한 패스워드 검증]

지난 시간에 실습으로 진행한 방명록 만들기를 보면 수정&삭제 작업에서 필요한 비밀번호 확인 작업에 대해 심각하게 취약한 보안성으로 검증을 진행했는데, 오늘 ajax를 사용하여 비밀번호를 노출하기 않고 비동기 통신을 사용해 비밀번호를 확인하는 방법을 배웠다.

지난 시간에 사용한 방법은 DB에 저장되어 있는 비밀번호를 폼 태그 내부에 hidden태그로 숨김 처리를 해놓고 this.form을 인자로 전달하여 JS영역 에서 pwd와 c_pwd를 비교하는 검증을 진행했는데, 페이지에서 소스보기를 누르면 히든으로 가려놓은 비밀번호가 노출이 되었었다.

이를 방지하기 위해 ajax를 사용하여 수정한 부분의 코드만 첨부하겠다. 기존의 코드를 보려면 여기를 눌러보면 된다.

 

[visit_list.jsp 파일의 js영역]

기존의 비밀번호 검증 과정을 VisitCheckPasswordAction 서블릿을 추가하여 브라우저에서 사용자가 입력한 비밀번호(c_pwd)와 idx를 파라미터로 넘기고 서버에서 검증을 거친 후 결과를 boolean형태로 수신하여 처리하도록 ajax의 전달인자와 콜백함수를 정의하였다. 

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
59
60
61
62
63
64
65
66
67
68
69
70
<script type="text/javascript">
 
    function modify_form(f){ //f = this.form
        var idx = f.idx.value;
        var c_pwd = f.c_pwd.value.trim();
        
        if(c_pwd==''){
            alert('수정할 게시물의 비밀번호를 입력하세요.');
            f.c_pwd.value='';
            f.c_pwd.focus();
            return;
        }
        
        $.ajax({
            url:'check_pwd.do',
            data:{'idx':idx, 'c_pwd':c_pwd},
            dataType:'json',
            success:function(res_data){
                //res_data={"result":true};
                if(res_data.result==false){
                    alert('비밀번호가 틀립니다.');
                    f.c_pwd.value='';
                    f.c_pwd.focus();
                    return;
                }
                
                location.href="modify_form.do?idx="+idx;
            },
            error: function(err){
                alert(err.responseText);
            }
        });
    }
 
    function del(f){
        var idx = f.idx.value;//게시물 번호
        var c_pwd = f.c_pwd.value.trim();//사용자 입력 비번
        
        if(c_pwd==''){
            alert('삭제할 게시물의 비밀번호를 입력하세요.');
            f.c_pwd.value='';
            f.c_pwd.focus();
            return;
        }
        
        $.ajax({
            url     :'check_pwd.do',    //VisitCheckPasswordAction
            data    :{'idx':idx, 'c_pwd':c_pwd},
            dataType:'json',
            success : function(res_data){
                //res_data = {"result":true}
                if(res_data.result==false){
                    alert('비밀번호가 틀립니다.');
                    return;
                }
                
                if(confirm("정말 삭제하시겠습니까?")==falsereturn;
                
                //삭제 수행
                location.href='delete.do?idx='+idx;
                
            },
            error   :function(err){
                alert(err.responseText);
            }
        });
        
    }
    
</script>
cs

[VisitCheckPasswordAction]

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
package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.json.simple.JSONObject;
 
import dao.VisitDao;
import vo.VisitVo;
 
/**
 * Servlet implementation class VisitCheckPasswordAction
 */
@WebServlet("/visit/check_pwd.do")
public class VisitCheckPasswordAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        // /visit/check_pwd.do?idx=25&c_pwd=1234
        //1. 수신인코딩 설정
        request.setCharacterEncoding("utf-8");
        
        //2. 파라미터 수신
        int    idx   = Integer.parseInt(request.getParameter("idx"));
        String c_pwd = request.getParameter("c_pwd");
        
        //3. idx에 해당되는 게시물 정보를 얻어와야 한다. 
        VisitVo vo = VisitDao.getInstance().selectOne(idx);
        
        //3-1. 비번 동일 여부 체크, 사용자가 입력한 비밀번호(c_pwd)와 원래 비밀번호(pwd)를 비교
        boolean bResult = vo.getPwd().equals(c_pwd);
 
        
        //4. json에 포장
        JSONObject json = new JSONObject();
        json.put("result", bResult);//{"result":true}
        String json_str = json.toJSONString();
        
        //5. 요청사항을 응답 처리한다. 
        response.setContentType("text/json; charset=utf-8;");
        response.getWriter().print(json_str);
    }
 
}
 
cs

 

'BackEnd > WEB' 카테고리의 다른 글

세션트래킹_국비_DAY66  (0) 2022.06.03
AJAX_국비DAY65~66  (0) 2022.06.02
웹DB_비번, 줄바꿈처리,AJAX_DAY63  (0) 2022.05.30
DBCP_웹DB_국비_DAY59  (0) 2022.05.24
국비_DAY58  (0) 2022.05.23