16주차 - Spring (9) ajax에 대해 알아보자

Spring framwork

16주차 - Spring (9) ajax에 대해 알아보자

우젼 2022. 10. 21. 17:49

이번의 목표

01. AJAX에 대해 알아보자.

02. AJAX를 사용해보자.

01. AJAX에 대해 알아보자

AJAX란 Asynchronous JavaScript And XML 의 약자입니다. 비동기통신이라고도 부릅니다.

ajax는 자바스크립트에서 이용할 수 있습니다.이름처럼 XML을 사용하여 이루어지는 비동기 통신이지만 현재에는 JSON, CSV 를 사용하기도 합니다. 기존의 연결 방법은 데이터를 주고 받기 위해서 페이지 코드를 전부 읽어오는 방식을 이용해왔습니다. AJAX는 페이지의 코드 전부를 읽어오지 않고 필요로 하는 데이터만 주고받습니다.

AJAX의 장점

01) 웹페이지 전체를 사용하지 않기 때문에 서버에 부하가 적습니다.

02) 페이지의 로딩이 일어나지 않고도 페이지의 화면을 갱신할 수 있습니다.

03) 고속으로 데이터의 송수신을 할 수 있습니다.

AJAX의 단점

01) 무분별한 AJAX의 사용은 오히려 서버에 부하가 늘어납니다.

02) 페이지가 없는 통신으로 인한 보안상의 문제가 있습니다.

02. AJAX를 사용해보자.

01) 페이지 코드를 작성할때ajax는 자바스크립트에서 사용이 가능합니다.그리고 사용하게될 객체는 XMLHttpRequest 입니다. 객체 생성 예시는 아래와 같습니다.

var xhr = new XMLHttpRequest

이 XMLHttpRequest에는 onreadystatechange 라는 이벤트 작동 시점이 있습니다. 영어 그대로 해석해보면 readyState가 change할때 작동한다는 뜻으로 여기서 readyState란 데이터 송수신 상태를 뜻합니다.readyState는 0부터 4까지 있으며 각각의 숫자가 의미하는 상태는 아래의 표와 같습니다.

값	설명
0	객체만 생성해놓은 상태
1	open() 메서드가 실행
2	요청에 대한 응답이 도착
3	요청한 데이터의 처리 진행 중
4	요청한 데이터의 처리가 완료 되어 준비가된 상태

onreadystatechange는 0->1, ~~ 3->4가 될때마다 이벤트가 작동합니다.

값이 1일때의 설명에 open()이라는 메서드가 언급되었습니다. 여기서 open() 메서드는 어디로 보낼것인지, 어떻게 보낼 것인지를 설정합니다. 코드의 예시는 아래와 같습니다.

xhr.open('GET', 'exam')

위의 코드는 exam이라는 파일과 GET 방식의 연결을 취하겠다는 뜻입니다. 파일을 첨부하는 경우에는 POST로 해야합니다. 그리고 이렇게 경로와 방법을 설정한 후, 실제로 데이터를 보내는 메서드는 send() 입니다.

이렇게 데이터를 보내면서 받아온 값을 화면에 출력하는데에 많이 사용되는데 이때 일반적으로 하나의 조건문을 사용합니다.

if(xhr.readyState==4 && xhr.status==200) {
실행문
}

readyState가 4이면서 status가 200일 때 라는 조건이 사용되는데 요청한 데이터의 처리가 완료되어야 이후 다음 작동이 되어야 하는것은 당연한 일이기에 이 부분은 대부분이 디폴트로 따라갑니다.

그리고 status라는 것은 페이지와의 통신 결과를 뜻합니다. 페이지를 접속할 때, 404에러는 파일이 존재하지 않고 500에러는 코드가 잘못되었다는 것을 우리는 배웠습니다. 200은 페이지와의 통신이 성공적으로 끝났다는 의미입니다.

곧, 위의 조건문은 데이터 요청이 완료되었으며 페이지와의 통신도 성공적으로 완료 되었을 때를 의미합니다.

++경우에 따라서는 페이지와의 통신에서 코드 에러가 발생했거나 무언가의 에러가 발생했을때에 작동하도록 하기 위해서는 status의 값이 200이 아닐때에 작동하도록 할수도 있습니다.

02) 컨트롤러 코드를 작성할 때

지금까지 컨트롤러는 return 값을 통해 페이지 연결을 했습니다. 하지만 ajax에서는 새로운 페이지로 이동하는 것이 아닌 데이터를 주고 받는 것이기 때문에 여기서 return 값은 다시 페이지로 돌려줄 데이터를 반환해야합니다.

그렇기 때문에 메서드를 만들때 '이 메서드는 데이터 전송을 위한 메서드'임을 명시해줘야 합니다.

이것이 @ResponseBody 어노테이션 입니다.

response의 body에 값을 담을 것이며, 리턴값이 jsp가 아니고 리턴을 반환값으로써 사용하겠다는 역할을 합니다.

대체로 ajax는 POST 타입을 사용 하는데 이렇게 되면 컨트롤러에서 한글이 깨지게 됩니다. 그렇기 때문에 Mapping 어노테이션에서 produces을 이용해 인코딩을 변경해주어야 합니다. 코드 예시는 아래와 같습니다.

@PostMapping(value="ex01", produces = "text/html; charset=UTF-8")

ajax를 통한 간단한 예제입니다.

01. 페이지 코드
02. 컨트롤러 코드
03. 결과 화면

01. 페이지 코드

<head>
<meta charset="UTF-8">
<title>ex01</title>
<script type="text/javascript">

var req;

function send() {
		req = new XMLHttpRequest();
		req.onreadystatechange = changeText
		req.open('post','ex01')
		req.send(null)
	}

	function changeText() {
		if(req.readyState==4 && req.status==200){
			var print = document.getElementById('print')
			print.innerHTML = req.responseText
		}
	}
	
</script>
</head>
<body>

<div id="print">출력 데이터</div>
<button type="button" onclick="send()">데이터 가져오기</button>

</body>

02. 컨트롤러 코드

	@ResponseBody
	@PostMapping(value="ex01", produces = "text/html; charset=UTF-8")
	public String ex01Post() {
		return "서버의 응답 데이터";
	}
    
    @GetMapping("ex01")
	public String ex01Get() {
		return "ajax/ex01";
	}

저작자표시