Spring 에서 ajax 사용하기

What is ajax??..

ajax는 뭘까요? 이것 역시 줄임말일거 같은 냄새가 풀풀 나는데요 ^^

ajax : Asynchronous Javascript and XML

해석해보자면 비동기식 자바스크립트, XML 이라는 뜻입니다. 그러면 비동기식이 뭐냐고요?

저희는 클라이언트와 서버가 데이터를 주고 받을때 항상 “동기식” 방법을 사용해서 지금까지 주고받았습니다!

무슨말이냐면..! 간단하게 클라이언트가 어떠한 url요청을 하면 해당 url요청에 응하기 위해 페이지가 새로고침을

되는것이다!! 라고 생각하면 매우 간단합니다! 반대로 비동기식은 페이지 새로고침 없이도 사용자의 요청을 실시간으로

처리할 수 있다!!! 라고 생각하면 좋을거 같습니다 🙂

동기(synchronous : 동시에 일어나는)

• ****요청을 하면 (바로) 응답을 받는다는 의미. 말 그대로 동시에 일어난다는 뜻. 요청과 그 결과가 동시에 일어난다는 약속. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.

비동기(Asynchronous : 동시에 일어나지 않는)

• 동시에 일어나지 않는다를 의미. 요청과 결과가 동시에 일어나지 않을거라는 약속이다. 요청과 응답이 다른 시간대 존재하기 때문에, 요청내용에 대해 지금 바로 혹은 당장 응답받지 않아도 된다. (바로 응답이 와도 상관없음!)

---

When ajax is useful?

• 웹페이지의 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

---

How to use?

아래 코드가 제일 기본적으로 ajax를 사용하기 위한 준비입니다.

(저는 제이쿼리를 이용하여 ajax를 사용했습니다! 또한 기본적으로 JSON에 대한 기본 개념이 잡혀있어야 합니다.)

var data = { userid:"wooow1122",userpwd:"wwwww1122"}

$.ajax({
	url: '${pageContext.request.contextPath}/webPage', // 클라이언트가 요청을 보낼 서버의 URL 주소
	data: data,        // HTTP 요청과 함께 서버로 보낼 데이터
	type: 'POST',          // HTTP 요청 방식(GET, POST)
	dataType: 'html',      // 호출 했을 때 결과타입
	success : function(data) { //요청 및 응답에 성공시 실행할 함수 설정
	}
});

---

요청을 처리할 컨트롤러

@GetMapping("/webPage")
	@ResponseBody
	public AccountVO webPage(String userpwd, String userid) {
		System.out.println(userid+" "+userpwd);
		
		BoardVO vo = new BoardVO();
		vo.setNo(1234);
		vo.setSubject("x....");
		vo.setUserid("배고프당.....");
		
		return vo;
	}

잘 보면 메소드의 매개변수명이 ajax에서 담은 데이터의 변수명과 동일합니다.

이렇게 데이터를 ajax로 부터 가져와서 처리할 수 도 있습니다!

또한 전달받은 데이터 말고도 내부에 가지고 있는 데이터를 가지고 객체로 데이터를 return해서

보내줄 수 도 있습니다.

<aside> 💡 @ResponseBody 어노테이션을 써줘야지 프론트에서 전달한 json 데이터를 해당 파라미터에 매핑시킬수 있습니다.

</aside>

---

처리한 결과값을 가지고 프론트에 표시

var data = { userid:"wooow1122",userpwd:"wwwww1122"}

$.ajax({
	url: '${pageContext.request.contextPath}/webPage', // 클라이언트가 요청을 보낼 서버의 URL 주소
	data: data,        // HTTP 요청과 함께 서버로 보낼 데이터
	type: 'POST',          // HTTP 요청 방식(GET, POST)
	dataType: 'html',      // 호출 했을 때 결과타입
	success : function(result) { //요청 및 응답에 성공시 실행할 함수 설정
		var tag = "<ol>";
					tag+="<li>번호="+result.no+"</li>";
					tag+="<li>우왕="+result.subject+"</li>";
					tag+="<li>배고프당="+result.userid+"</li>";
					tag+="</ol>";
					$("#ajaxResult").append(tag); //id가 ajaxResult인 태그에 맨 마지막에 var tag의 내용을 붙이겠다! 라는 뜻 
				},error:function(error){ // 에러가 나면 이쪽으로 오게되며, 콘솔에 에러명을 찍겠다.
					console.log(error.responseText);
				}
	}
});

쉽죠?….그렇게 어려운 개념은 아니지만 모든 프로그램은 흐름을 보고 따라갈줄 아는게 제일 중요한거 같습니다!

비동기식 방식인 ajax는 웹에서 많이 사용되는 데이터 처리 방식이니, 앞으로 꾸준히 이용해서 익숙해져보도록 하겠습니다 🙂