[03] Ajax 기초, 실습

Ajax 개요

Ajax의 특성을 알아보고

간단한 실습을 통해 이해를 다져보자.

---

Ajax란?

• Asychronous JavaScript and XML의 약자
• JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식
  >> 데이터 형식은 XML뿐만 아닌 Text, HTML, JSON 등 다양한 형식 가능

 

---

비동기식 Ajax

동기식과 대비되는 비동기식의 특징을 알아보자 

---

 

동기식 요청 vs 비동기식 요청

• 동기식 요청 : 
  - 응답페이지가 돌아와야만 이어서 작업을 할 수 있다.
  - a, form submit, location.href, redirect 등을 이용해서
    url을 요청한 경우
  ** 특징
  1) 사용자의 요청처리 후 그에 해당하는 응답페이지가 돌아와야만 그 이후의 작업 가능
  2) 서버에 요청한 결과까지의 시간이 지연되면 계속 기다려야함 (흰페이지로 보여질것)
  3) 응답페이지가 전체 로딩되면서 보여짐
    >> 페이지 깜빡거림 발생
    >> 스크롤 최상단으로 옮겨짐
• 비동기식 요청 : 
  - 서버로부터 데이터를 가져와 전체페이지를 새로 고치지 않고
    일부요소만 로드할 수 있게 하는 기법
  ** 특징
  1) 현재 페이지를 그대로 유지하면서 중간중간 마다 추가적으로 필요한 요청을 보낼 수 있음
     (아직 응답이 안돌아온 상태에도 추가로 보낼수가 있다)
  2) 요청을 보냈다고 해서 동기식 방식처럼 다른 페이지로 넘어가지 않음
  3) 요청을 보내놓고 그에 해당하는 응답(데이터)이 돌아올때까지 현재페이지에서 다른작업을 할 수 있음
  4) 돌아오는 응답데이터로 현재 페이지 일부 영역에 출력시켜줄 수 있음
  5) 페이지 전체가 리로딩 되는게 아니기 때문에 페이지 깜빡거리지 않음 (스크롤 올라가지 않음)

 

 

비동기식 사용예

• 실시간 급상승 검색어 로딩
• 검색어 자동완성(키업되는순간)
• 아이디 중복체크(커서가 포커스 아웃되는순간)
• 찜하기 누르면 하트가 빨간색으로
• 댓글달기
• 무한스크롤링(페이징대체)

 

 

비동기식의 단점

• 현재페이지에 지속적으로 리소스가 쌓임 => 페이지가 느려질 수 있음 (엄청 많이 요청되었을 경우) 
• 에러 발생시 디버깅 어려움(발생위치 찾기 어렵다)
• 조회요청 처리 후에 돌아온 응답데이터를 가지고 현재페이지에 뿌릴때 새로운 요소를 만들어야됨
  >> 동적으로 요소를 만들어내는 스크립트 구문을 잘 써야함
• JavaScript로 쓸때는 브라우저별로 호환성 체크해야함 (jQuery로 할때는 자동으로 해결됨)

 

 

오류 및 처리과정 확인 팁

• 비동기식은 오류가 났는지조자 직관적으로 알기 어렵다
  >> 이때는 F12버튼의 네트워크탭을 열어둔 상태에서 요청을 해본다.
  (동기식에도 활용 가능한 팁)
• 요청후 생긴 1줄을 클릭해보면 다양한 정보가 나옴
  >> Headers 의 General
  요청했던 url나옴(한글은 깨져서 나온다)
  성공했을때 나오는 코드는 200임
  >> Payload
  어떤 키값으로 어떤 밸류값이 넘어가는지 나옴
  >> Response
  어떤 응답데이터가 돌아오는지 나옴

 

---

jQuery의 Ajax 통신방식

$.ajax()로 ajax객체를 부르는데,

매개변수로 요청처리할 속성과 속성값을 객체에 담아서 보낸다.

---

/* aJax 통신방식 */
    $.ajax({
        속성명:속성값,
        속성명:속성값,
        ...
    });

 

주요속성과 입력할 속성값

• url : 요청할 url주소(필수)
• type | method : 요청전송방식 (get/post)
• data : 요청시 전달할 값
• success : ajax 통신에 성공했을 경우 실행할 함수 정의
• error : ajax 통신에 실패했을 경우 실행할 함수 정의
• complete : 성공/실패 여부와 상관없이 무조건 실행할 함수

 

 

기타속성과 입력할 속성값

• async : 서버와의 비동기 처리 방식 설정 여부(기본값 true)
• contentType : request의 데이터 인코딩 방식 정의(보내는 측의 데이터 인코딩)
• dataType : 서버에서 response로 오는 데이터의 데이터 형 설정, 값이 없다면 스마트하게 판단함
    >> xml - 트리 형태의 데이터 구조
    >> json - 맵 형식의 데이터 구조(일반적인 데이터 구조)
    >> script - javascript 및 일반 String 형태 데이터
    >> html - html 태그 자체를 return 하는 방식
    >> text - String 데이터
• accept : 파라미터의 타입을 설정(사용자 특화 된 파라미터 타입 설정 가능)
• beforeSend : ajax 요청을 하기 전 실행되는 이벤트 callback 함수(데이터 가공 및 header 관련 설정)
• cache : 요청 및 결과값을 scope에서 갖고 있지 않도록 하는 것 (기본값 true)
• contents : JQuery에서 response의 데이터를 파싱하는 방식 정의
• context : ajax 메소드 내 모든 영역에서 파싱 방식 정의
• crossDomain : 타 도메인 호출 가능 여부 설정(기본값 false)
• dataFilter : response를 받았을 때 정상적인 값을 return 할 수 있도록 데이터와 데이터 타입 설정
• global : 기본 이벤트 사용 여부(ajaxStart, ajaxStop)(버퍼링 같이 시작과 끝을 나타낼 때, 선처리 작업)
• password : 서버에 접속 권한(비밀번호)이 필요한 경우
• processData : 서버로 보내는 값에 대한 형태 설정 여부(기본 데이터를 원하는 경우 false설정)
• timeout : 서버 요청 시 응답 대기 시간(milisecond)

 

 

---

실습

ajax에 대해 간단히 실습을 해보기 위해 jsp파일을 만든다.
webapp폴더 바로 아래 만들어서

[ http://localhost:포트번호/contextPath/파일명.jsp ]
라는 url로 결과를 확인해보도록 한다.

 

---

1) 동기식 방식으로 요청시 값 전달해보기

• 기존에 사용하던 방법(form태그, location.href)으로 서블릿 test1.do를 호출해보자
  이때, input에 입력된 값을 함께 보낸다.
• 서블릿 처리 전이여서 흰페이지로 나오지만 두 방법 모두
  url이 [ http://localhost:8887/web/test1.do?input=입력값 ] 임 확인할 수 있다.(데이터 잘 전달됨)

<!-- 1) form submit으로 url 요청 -->
    <form action="/web/test1.do">
        <input type="text" name="input">
        <button type="submit">전송</button>
    </form>
	
<!-- 2) location.href으로 url 요청 -->
    <input type="text" id="input">
    <button onclick="test();">전송</button>
    <script>
        function test(){
            location.href = "/web/test1.do?input=" + document.getElementById("input").value;
        }
    </script>

 

 

2-1) AJAX를 이용해 값 전달 및 처리값으로 화면 꾸미기

• 처리과정
  1) 전송을 일으킬 버튼에 onclick="test1();" 속성을 부여한다.
  2) 스크립트 태그내에서 test1() 함수를 정의하고, ajax객체를 호출한다.
  3) ajax의 url 속성값으로 있는 url(서블릿매핑값)으로 요청이 넘어가고, 이때 data 속성값이 넘어간다. 
  4) 서블릿이 완료되면 해당 서블릿에서 넘긴 데이터를 success의 속성값 함수의 매개변수로 받는다.
     해당 데이터로 처리할 로직을 success 함수 내에 만든다.
• 중간테스트시, 서블릿 요청처리를 안해놓으면 페이지가 그대로여서 아무 반응 없는것처럼 보임
  >> 이때 f12 콘솔창에서 확인한다

<!-- 1. 버튼 클릭시 서버에 요청 및 응답 -->
입력 : <input type="text" id="input1">
<button onclick="test1();">전송</button><br>
	
응답 - <span id="output1">현재응답없음</span>
	
<script>
    function test1(){
        $.ajax({
            url : "/web/test1.do",
            //넘길 데이터가 여러개일때는 객체로 키밸류 세트 넘긴다.(,로 구분)
            data : {input:$("#input1").val()}, 
            //서블릿에서 보낸 데이터 받으려면 success의 매개변수로 받는다.
            success : function(result){
                console.log("ajax 통신 성공");
                $("#output1").text(result);
            }, 
            error : function(){
                console.log("ajax 통신 실패");
            }, 
            complete : function(){
                console.log("성공여부 상관없이 무조건 출력");
            }
        });
    }
</script>

 

 

2-2) ajax를 처리하는 서블릿

• 비동기식 용 서블릿은 응답페이지가 아닌 응답데이터를 돌려주면 된다.
  (명확히 하기 위해 비동기식용 서블릿은 앞에 Ajax를 붙여 명명하는것이 관례이다)
• 전달값을 뽑아 데이터를 가공한 뒤(String responseDate)
  getWriter() 메소드로 요청자와의 통로를 만든 뒤 출력함으로써 데이터를 전달한다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //전달값 뽑기
    String str =  request.getParameter("input");
    //요청처리 후 응답할 데이터 (한글이 포함된 문자열)
    String responseData = "입력된값 : "+str+", 길이 : "+str.length();
    //한글이 포함된 문자열 돌려줄때는 setContentType 메소드 처리해준다.
    response.setContentType("text/html; charset=UTF-8"); 
    //요청자와의 통로를 만든 후 출력시킨다.(서블릿으로 응답화면 꾸릴때 썼던 구문들)
    response.getWriter().print(responseData);
}