[비동기 통신] AJAX 통신 / Form 유효성 검증

AJAX 통신 / 비동기 통신

비동기 통신?

요청은 했지만 언제 서버에서 응답할지 모르는 것.

요청하고 실행 순서는 그냥 흘러감(응답이 올때까지 기다리지 않음)

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다.

AJAX 통신이란?

Ajax 통신은 비동기 통신이며, Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

클라이언트가 서버에 요청을했을때 페이지 이동 없이 자바스크립트로 form의 파라미터를 전송하고, 서버에서 응답을 해준다.

서버에서는 보통 JSON형식으로 문자열을 응답을 보낸다.

상세한 정보는 https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80 를 참고

AJAX를 사용하는 이유

단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하고 말 것이다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

[출처]https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

1. AJAX의 장점

웹페이지의 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

2. AJAX의 단점

히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
지원하는 Charset이 한정되어 있다.
Script로 작성되므로 디버깅이 용이하지 않다.
동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

AJAX 작성 방법(Jquery 사용)

Jquery를 사용해서 .ajax()메소드를 작성하는 방법은 아래와 같다.

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

$.ajax({name:value, name:value, ... });
 
//예시
$("#checkBtn").on("click",function(){
    var inputId=$("#id").val();
  $.ajax({
    //요청을 보낼 url
    url:"${pageContext.request.contextPath }/users/checkid.jsp",
    //요청 방식
    method:"GET",
    //서버에 요청을 보낼때 같이보낼 데이터
    data:{inputId:inputId},
    //요청에 성공했을때 응답 받을 내용
    success:function(responseData){ 
    console.log(responseData);
  }
});
Colored by Color Scripter

cs

좀 더 상세한 name과 value는 아래의 링크를 참조하면 된다.

https://www.w3schools.com/jquery/ajax_ajax.asp

예시

아이디 '중복 확인' 버튼을 클릭했을때 페이지 이동 없이 클라이언트가 서버에게 요청을 보내고 그에 대한 응답을 서버가 하는 예시를 보자

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

// users/signin_form.jsp
<!--생략-->
<title>Insert title here</title>
<script src="${pageContext.request.contextPath }/resources/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <h1>회원 가입 페이지</h1>
        <form action="signup.jsp" method="post">
            <div>
                <label for="id">아이디</label>
                <input type="text" id="id" name="id" />
                <button id="checkBtn">중복확인</button>
            </div>
            <!--생략-->
    </div>
    <script>
        //중복확인 버튼을 눌렀을때 실행할 힘수 등록
        $("#checkBtn").on("click",function(){
            //1.입력한 아이디를 읽어온다.
            var inputId=$("input[name=id]").val();
            //2.서버에 보내서 사용가능 여부를 응답 받는다.
            $.ajax({
                url:"${pageContext.request.contextPath }/users/checkid.jsp",
                method:"GET",
                data:{inputId:inputId},
                //클라이언트가 요청한 url에 대해 서버가 응답할때 함수가 호출되고, 응답한 문자열(checkid.jsp)을 responseData 파라미터의 인자로 전달한다.
                success:function(responseData){ 
                    console.log(responseData);
                }
            });
        });
    </script>
</body>
</html>
Colored by Color Scripter

cs

id가 #checkBtn인 '중복 확인'버튼을 클릭하면 .ajax()메서드가 동작해 서버로 요청을 보내는 코드이다.

24번~32번 라인을 보면

url : checkid.jsp 페이지로 요청을 보낸다.

method : 요청 방식은 GET이다.

data : 요청을 보낼때 함께 보낼 데이터(파라미터)

success: 요청에 성공하면 서버에서 응답한 내용이 responseData 변수에 대입되고 함수가 동작한다.

.ajax()메서드에 의해 checkid.jsp로 요청이 들어오면 checkid.jsp 페이지에서는 요청에 대한 응답을 준비한다.

1
2
3
4
5
6
7
8
9
10
11

// users/checkid.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
    String inputId=request.getParameter("inputId");
    boolean isExist=UsersDao.getInstance().isExist(inputId);
    
%>
{"isExist":<%=isExist %>}
Colored by Color Scripter

cs

파라미터로 전달받은 inputId를 읽고 UsersDao에 있는 메소드인 isExist의 인자로 전달한다.

isExist()메서드는 클라이언트가 입력한 id와 DB에 저장되어있는 ID를 비교하고,

DB에 동일한 ID가 존재하면 true를 존재하지 않으면 false를 반환한다.

그 반환 받은 결과를 signin_form.jsp 페이지에 있는 .ajax()메서드의

success:function(responseData){}의 인자로 전달한다.

javascript 영역에서 쉽게 사용할 수 있도록 json 형태로 응답하도록 jsp 설정을 변경해준다.

contentType="application/json" 으로 변경하면 된다.

서버에서 클라이언트의 요청에 대한 응답을 할때 JSON 형식으로 전달을하면 자동으로 파싱을 한다.

따라서 JS에는 object로 전달된다.

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
{"num":1,"name":"김구라"}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
{"num":1,"name":"김구라"}

'Servlet&JSP' 카테고리의 다른 글

[MVC] EL, forward, redirect 사용 해보기 / DTO에 담겨 있는 내용 출력 (0)	2020.01.21
[JSP] EL(Expression Language) - 산술, 비교, 논리, empty 연산 (0)	2020.01.21
Filter(필터) (0)	2020.01.10
[HttpServletResponse / HttpServletRequest] scope 스코프(영역) (0)	2020.01.10
[HttpServletResponse / HttpServletRequest] 리다이렉트(redirect) / 포워드(forward) (0)	2020.01.10

sally의 프로그래밍 공부