[jQuery] $.ajax 활용하기 with java
나중에 잊어버릴까봐 세미프로젝트에서 사용한 ajax 예제를 가지고 정리하였다
$.ajax 는 jQuery 문법이기 때문에 먼저 jQuery 를 준비해야한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
실제 프로젝트에 사용한 ajax 예이다.
예시1)
[$.ajax]
type = Request Method 를 지정한다.
url = Request 를 보낼 url 을 작성한다.
data = Request 에 담을 data 를 작성한다.
dataType = 서버에서 보낸 응답(Response)을 담을 자료형을 지정한다.
success = 성공적으로 작동했을 때 실행할 기능을 작성한다.
error = 서버에서 error 발생 시 실행할 기능을 작성한다.
[java.controller]
@ResponseBody : Request 를 보낸 클라이언트에 Response 를 보내는 역할을 한다. return 을 통해 Request 를 보낸 클라이언트로 데이터를 보낼 수 있다.
@RequestMapping : 클라이언트에서 value 에 해당하는 url 로 Request 를 보낼 때 작동함을 나타낸다. method 를 통해 Get Request 처리와 Post Requst 처리를 분리하여 처리할 수 있다.
클라이언트에서의 URL Request - 서버의 RequestMapping(value = URL) 이 매핑된다.
@RequestParam : Request 에 담겨진 parameter 등의 data 를 가져와서 사용할 수 있다.
예시2)
클라이언트에서 url : showChatInfo.do 로 POST Request 를 보내면, 서버에서 매핑되는 URL을 찾아 showChatInfo 함수를 실행시킨다. 클라이언트에서 서버로 보낼 데이터는 chatRoomId 이다.
서버에서는 클라이언트로부터 받은 chatRoomId를 받아서 해당 chatRoomId를 가지고 있는 채팅방정보를 가져온다. 해당 채팅방 정보를 JAVA Object(DTO) 에 담아서 클라이언트로 해당 JAVA Object(DTO)를 보낸다.
서버는 JAVA 이고 클라이언트는 Javascript 이므로 클라이언트는 서버에서 받은 자바객체를 text 로 변환하여 받는다.(dataType: "text"). JAVA Object 를 text 형태로 받으면 JSON 형태의 문자열로 가져와진다.
예시 : "{ data1: content1, data2: content2}"
클라이언트는 서버로부터 받은 JSON 형태의 문자열을 JSON.parse(문자열) 을 통해 JSON 으로 변환하여 데이터를 사용할 수 있다.