[JavaScript/jQuery] ajax 비동기통신 간단하게 사용하기

안녕하세요! Plitche(플리체)입니다.
이번 포스팅의 주제는 [jQuery] ajax 비동기통신 간단하게 사용하기입니다.

Intro

• 먼저 ajax 비동기통신은 javascript를 더 쉽게 사용하기 위한 jquery 라이브러리의 한 메소드로 실무에서 정말 많이 쓰이는 라이브러리로 무조건 습득해야되는 것들 중 한가지 이다.
• 일반적인 MVC패턴을 통해서 개발을 진행할 때 controller에서 Return되는 값은 ViewResolver에 의한 Prefix, Suffix를 통해 jsp파일명을 반환한다.
  
  
• 하지만 페이지 이동이 아닌 동일한 페이지 내에서 통신을 하기 위해서는 ajax를 사용한다.

여기서 비동기통신이란 앞선 요청(request)에 대한 응답(response)를 기다리지 않고
계속해서 뒤의 요청을 보내는 방식이다.

---

Ajax

기본적인 사용 법은 $.ajax() 와 같이 사용된다.

$.ajax(
  필요한 옵션1,
  필요한 옵션2,
  ...
)

submit 처리를 하여, 데이터를 전송하거나 원하는 액션을 하게 되면 데이터 처리 후 다시 view(화면)에 표출되는 방식이 페이지를 새롭게 로드하게 된다.

쉽게 설명하여 페이지를 이동하거나 같은 페이지이더라도 새로고침 되는 방식처럼 동작 한다는 것이다. 하지만 ajax 비동기통신을 사용하게 되면 원하는 부분 이외에는 모든 view(화면)이 고정되어 있는 상태에서 즉, 화면 이동 없이 처리할 수 있게 되는 것이다.

모든 페이지의 내용을 변경하는 것이 아니라면 이러한 통신 방식은 당연히
보다 빠른 처리/자연스러운 표현이 가능하게 된다.

만약 당신이 checkbox를 통해서 원하는 카테고리만 검색을 한다고 생각해보자.
일반적인 새로고침 방식이라면 원하는 리스트는 얻을지 몰라도,
당신이 어떤 카테고리들을 선택했었는지는 체크가 해제되어 있을 수 있다.

---

기본사용 용법(javascript code)

HTML

먼저 아래와 같이 3개의 button을 단순하게 생성하였다.

  <input type="button" class="getAgeBtn" value="철수" />
  <input type="button" class="getAgeBtn" value="진성" />
  <input type="button" class="getAgeBtn" value="영희" />
  나이 : <span id="result"></span>

여기서 각각의 버튼을 클릭 했을 때 해당 이름을 가진 사람의 나이를 표시해 주자.

(사실 일반적인 script에서 처리도 가능 하지만, back단을 무조건 가야한다는 전제하에 작성하였다.)

---

Javascript(스크립트)

  $(document).on('click', '.getAgeBtn', function() {
        let name = $(this).val(); 
            // 보내줄 data param을 json형식으로 만들기
        let param = {"name" : name};

        $.ajax({
            url: 'getAge.do', // Controller의 mapping값
            type: 'get',  // get, post 방식 中
            data: param,  // Controller로 보낼 데이터
            contentType: 'json/application; charset=utf-8',  // 보내는 data의 타입
            dataType: 'text/plain', // 받을 데이터 타입
            success: function(age) {  // 정상적으로 return 받았을 때 실행할 함수
                    $('#result').empty();
                $('#result').text(age);
            },
            error: function(){alert('실패');} // 실패했을 때 작동할 함수
        });
    });

1. 공통적으로 class를 태그에 부여해서, jquery의 on속성을 이용해서 클릭 속성을 부여하였다.
2. 클릭 하였을 때 클릭한 객체의 value를 변수에 저장해서 json타입으로 만들어 컨트롤러로 보낸다.
3. 위 주석에 맞게 차례로 작성한다.
   3-1. type: get방식과 post방식
   3-2. contentType: json, xml, text 등
   3-3. dataType: json, xml, html, text 등
   3-4. success: ajax통신이 성공 했을 때 컨트롤러에서 return 데이터가 함수의 파라미터로 넘어오게 된다.
   3-5. error: ajax통신이 실패 했을 때 실행됨

위 각각 자세한 내용에 대해서는 따로 다루도록 하겠습니다.

---

Controller(컨트롤러)

@RequestMapping(value="getAge.do", method=RequestMethod.GET)
@ResponseBody
public String getAge(HttpServletRequest request) {
    String name = request.getParameter("name");
    String age = "0";
    switch(name) {
        case "철수" : age = "25"; break;
        case "진성" : age = "20"; break;
        case "영희" : age = "30";
    }
    return age;
}

1. ajax() 에서 url에 작성한 주소가 controller의 mapping value와 일치할 때 작동한다.
2. 파라미터로 넘긴 data를 메소드의 매개변수로 받아서, jsp에서 넘긴 name을 변수로 저장해 준다.
3. age를 0으로 초기화 해 준다.
4. 저장된 name이 '철수','진성','영희' 중 어느 일치여부에 따라 switch문을 통해 변수 age에 해당 이름에 맞는 나이를 저장해 준다.
5. 저장된 age를 return해준다.

주의!
여기서 @ResponseBody 어노테이션을 작성해주지 않으면, 일반적인 페이지 이동 방식처럼 작동하여 age.jsp를 찾기 때문에 꼭 ajax를 사용할 때는 잊지 않도록 한다.

---

결과(result)

나이를 알기 원하는 사람의 이름을 클릭 했을때 해당 나이가 나오는 것을 볼 수 있다.

 

나이 : ???

 

 

---

My thought

• ajax 비동기통신은 그 활용성이 정말 다양한 방법이 있으며, 주의할 점과 고려할 사항 또한 정말 많습니다.
  하지만 웹 개발을 하는 사람이라면 꼭 알아야할 중요한 기능이기도 합니다.
• 저도 아직 그 사용법에 대해서 다 사용을 해본 것도 아니기 때문에, 차차 모든 사용법을 사용해서 포스팅 하도록 하겠습니다.
  두서 없는 포스팅 내용을 읽어주셔서 감사합니다.