[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 으로 변환하여 데이터를 사용할 수 있다.