AJAX 사용하기!!

ajax란

서버로부터 데이터를 가져와 페이지를 새로고침 하지 않고 일부만 로드할 수 있게 하는 기법으로 비동기식 요청을 보내는데 필요한 기술을 말한다. AJAX(Asynchronous JavaScript AND XML)

장단점

장점 

비동기식 방식으로 웹서버의 응답을 기다리지 않고 데이터를 빠르게 처리하는 개발기법, 페이지 리로딩 없이 처리됨

예) 실시간 검색어, 검색어 자동완성

단점 

한 페이지에 지속적으로 사용시 리소스가 계속 쌓여 페이지가 느려짐, 스크립트로 되어있어 에러 발생시 디버깅이 어려움 

비동기식 처리모델(AJAX 방식)

-> 페이지가 로드 되는 동안 브라우저는 먼저 서버에 데이터를 요청 script문 실행한 후 페이지의 나머지를 계속 로드하고 페이지와 사용자의 상호작용을 처리하면 브라우저는 요청한 데이터를 기다리지 않는다. 그리고 요청한 데이터가 도착을 하면 그때 이벤트가 발생하면서 지정된 함수가 호출되어 실행되는 방식

동기식 처리모델(기존의 방식)

-> 페이지가 로드 되는 동안 브라우저는 script문을 실행되면 그 실행이 종료될때 까지 나머지 페이지를 로드하지 않고 기다리고 있다가 그 script문이 처리가 종료되면 페이지의 나머지 부분을 로드하는 방식

*정리

기존의 방식은 화면이 깜박하고 페이지가 바뀌는 방식이다. 즉 요청이 있을 때마다 그 요청이 끝날때까지 기다린 후 화면이 깜박하면서 페이지가 바뀌는것인데 ajax는 화면이 깜박하지 않고 자바스크립트 메소드가 실행되어 새로운 페이지가 열리는게 아니고 원래 있던 페이지의 자바스크립트 함수로 값이 들어와 화면에 보여준다. 

그렇기에 화면을 깜박하지 않고 데이터를 가져온다.   

예) 검색어 자동완성 같은 경우에 글자가 입력될 때마다 디비의 값과 조회하여 그 뒤의 값을 띄워주는것인데 동기식으로 처리하면 글자를 입력할 때마다 화면이 깜박거릴꺼고 전송버튼도 글자마다 눌러줘야하는 불편함이 생긴다. 

ajax는 자바스크립트로도 있지만 제일 간편한 jquery 방식을 포스팅할 것이다.

$.ajax(jQuery 방식의 AJAX) 처리절차

1. url 속성을 통해 전송할 URL 주소 지정

2. data 속성을 통해 전달할 데이터 설정

3. 성공, 실패 시 처리할 로직을 함수로 선언

4. 반드시 처리할 로직을 선언

$.ajax() 주요 속성 정보

속성명	설명
url	데이터를 전송할 URL의 주소 설정
data	서버에 전송할 데이터를 key : value 형식으로 설정
dataType	서버가 리턴하는 데이터의 타입 설정(text, xml, html)
type	서버로 전송하는 형식 지정 (GET, POST)
success	통신에 성공했을 때 처리할 로직을 함수로 작성
error	통신에 실패했을 때 처리할 로직을 함수로 작성
complate	성공했든 실패했든 반드시 실행할 로직을 함수로 작성

아이디 중복 체크를 AJAX로 구현해보자!

$('#id').blur(function(){
            //AJAX로 아이디 중복 구현
            var id = $('#id').val().trim();
            $.ajax({
                url:"<%=request.getContextPath()%>/member/overlapCheck",
                //key : value 방식으로 보냄
                data:{"searchId":id},
                Type:"get",
                success:function(data){
                    var id = data;
                    //서블릿에서 보내는 데이터는 data로 받는다.
                    //보낸 id가 존재하면 특정 값을 보내고, 중복되지 않으면 ""이 보내짐
                    console.log("ajax반환값 : "+data);
                    //id가 중복이면 길이값이 1보다 클 것이기에 아래와 같은 조건을 줌
                    if(id.length>1){
                        //input 옆 공간에 중복된 아이디가 존재한다고 알려줌
                        $('#idMsg').html("중복된 아이디가 존재합니다.");
                        $('#id').css("border","4px solid red");
                        $('#idMsg').css("color","red");
                    }else{
                        //테두리를 파란색으로 지정해 문제없음을 알림
                        $('#id').css("border","4px solid blue");
                        //중복된 아이디가 존재한다는 문구를 지워줌    
                        $('#idMsg').html("");
                    }
                }
            });
        });

input의 id값이 id인 창을 blur 했을 때 구현한 로직이다. 자세한 로직을 달았으니 위를 읽어보면 알 수 있다. 

다음으로는 서블릿이다. 서블릿은 크게 뭐없다 id값을 받아와 디비로 보내서 같은 id가 있는지 확인하고 확인된 

checkedId를 다시 response로 해당 페이지로 쏴주면 위에서 성공하면 success가 실행되고 실패하면 error의 

함수가 실행된다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String id = request.getParameter("searchId");
        String checkedId = new MemberService().overlapCheck(id);
        
        response.setContentType("text/checkedId;charset=utf-8");
        response.getWriter().append(checkedId);
        
        
    }

결과값