Ajax의 기본 정리! view-controller 통신 (비동기)

Ajax는 원하는 url을 통해 데이터를 주고 받을 수 있게 해줍니다.

이를 이용해서 데이터를 가져와 활용하고, 비동기적으로 페이지를 업데이트 등을 할 수 있습니다.

1. Ajax 사용 준비

먼저 Ajax는 Jquery의 내장돼있으므로 Jquery 사용이 필요합니다.

 

1. url을 사용하는 CDN 방식

<script  src="https://code.jquery.com/jquery-3.7.1.js"/> 

 

2. js 파일을 다운로드하여 참조하는 방식

https://jquery.com/download/

Download jQuery | jQuery

2. Ajax 문법

$.ajax({

  url: "" 

  type: ["get", "post"]

  contentType: controller로 보내는 값의 유형 ["application/json; charset-utf-8"]

  data: controller로 보낼 데이터 

  dataType: controller에서 받는 값의 유형 ["json"]

  success: function() // 정상적으로 응답했을 때 실행할 함수

  error: function() // 응답 실패 했을 때 실행할 함수 (data type 오류, 컨트롤러 실행 오류 등)

  async: true/false // default가 true이며 false로 비동기 실행을 끌 수 있음

})

 

3. ResponseBody / RequestBody

Ajax에서 보낸 데이터는 controller에서 @RequestBody를 통해 받으면 자동으로 객체, Map에 알맞게 들어가게 된다.

@ResponeBody가 붙은 controller면 리턴하는 값 자체가 body가 되어 전송된다. Map 또는 객체 등을 바로 전송해도 json 형태로 전송이 된다.

 

4. Json.stringify / Json.parse

Ajax에서 data를 보낼 때, Json.stringify를 하면 { } 형태로 작성된 객체를 json으로 변경해서 전송한다.

Ajax에서 data를 받을 때, Json.parse를 하면 json(문자열) 형태로 전송된 객체를 { } 객체로 변경한다.

-> ajax에서 json으로 전달받아도 객체를 보냈다면 자동으로 변환되므로 안해도 되는 경우도 많다. 보낼 때 실제로 json 문자열 또는 objectMapper로 문자열이 된 객체일 때만 사용하면 됨.

 

5. 주의할 점 (디버깅)

- 정상적으로 실행이 된 거 같은데 error로 이동하는 경우

: 응답하는 데이터의 type이 맞지 않음

 

- controller에서 리턴하는 view로 이동 안함

: ajax는 url에서 데이터를 가져오기 위함이고 이동을 하기 위한 것이 아님! 이동은 success 함수 내에서 location.href 이용

새로운 view에 데이터도 전달하고 싶다 -> form을 쓰거나 query parameter를 보내는 href 사용

 

- 분명 데이터를 가져와서 succee에서 바깥에 있는 변수를 업데이트 했는데 반영이 안됨

: ajax는 비동기적 실행이므로 success를 실행하기 전에 뒤에 있는 코드를 먼저 실행할 수도 있다.

success 안에서 해당 코드를 실행할 수 있게 하거나, async를 false로 한다.

 

 

틀린 것은 지적, 궁금한 것은 질문 남겨주세요!