[Ajax] Ajax를 활용한 통신

AJax (Asynchronous JavaScript and XML)

 

AJax는 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신함으로써 동적인 페이지를 만들어줄 수 있게 해주는 기법이다.

 

AJax를 사용하면 굳이 프론트가 움직이지 않아도 백그라운드 영역에서 서버와 통신이 가능하고, 그 결과를 토대로 페이지 내의 요소를 동적으로 바꾸어줄 수 있다.

 

 

XMLHttpRequest

 

XMLHttpRequest는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.

현재를 기준으로 대부분의 웹 브라우저 (익스플로어는 7 이상) 가 해당 객체를 내장하고 있고, AJax는 이를 활용하여 서버와 통신할 수 있다.

 

 

사용법

 

Ajax의 대략적인 사용법은 아래와 같다. 물론, 모든 항목의 값을 지정해줄 필요까지는 없다.

• type : 서버에 보낼 HttpMethod를 입력한다.
• url : 목표 서버의 url을 입력한다.
• contentType : request로 보낼 데이터의 타입을 입력한다.
• dataType : response로 받을 데이터의 타입을 입력한다. 이 때, 실제 response 데이터의 타입과 다르면 통신에 성공하더라도 에러가 발생할 수 있다.
• async : 동기, 비동기를 설정한다.
• data : 서버로 보낼 데이터를 입력한다. (requestBody)
• success : 통신 성공 이후 처리 로직 작성 함수를 지정한다.
• error : 통신 실패 이후 처리 로직 함수를 작성한다.
• beforeSend : 통신 직전 처리 함수를 지정한다.
• complete : 통신 이후 처리 함수를 지정한다.

$.ajax({
	//헤더 입력
	type : "POST", 					//GET, POST, PUT, DELETE 등 HttpMethod 입력
	url : "...", 					//신호를 보낼 서버 주소 입력
	contentType : "application/json; charset=utf-8", //request로 보낼 데이터
	dataType : "application/json;",			//response로 받을 데이터 종류
	async : true,					//true: 동기, false : 비동기
	data : {
		testData1 : 1,
		testData2 : 2
	},
	success : function(data, state, xhr) {
		//통신 성공 이후 처리 로직
		//data : response로 받은 데이터
		//state : success / err-type
		//xhr : xhr 객체
	},
	error : function(xhr, data) {
		//통신 실패 이후 처리 로직
	},
	beforeSend: function(xhr, ajaxOption) {
		//만약 처리 중 중단을 시키고 싶다면
		//xhr.abort()
		//ajaxOption : 전송한 ajax의 옵션들.
    }
	complete : function(xhr, state) {
		//통신 이후 실행 함수.
		//error일 경우에도 실행된다.
		//예외 처리의 finally 정도로 이해하면 쉽다.
	}
})

 

 

실습

 

이제 실제로 사용을 해보자.

가장 먼저 HTML에 해당 스크립트를 추가한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

그리고 HTML과 통신할 간단한 RestController를 작성했다.

@RestController
public class SampleRestController {

	@PostMapping("api/postTest")
	public String postTest(@RequestBody(required=false) String request) {
		StringBuffer returnStr = new StringBuffer(request);
		returnStr.append("\n");
		returnStr.append("를 서버에서 POST로 입력을 받았습니다.");
		
		return returnStr.toString();
	}
	
	@GetMapping("api/getTest")
	public String getTest() {
		StringBuffer returnStr = new StringBuffer();
		returnStr.append("서버에서 GET 입력을 받았습니다.");
		
		return returnStr.toString();
	}
}

 

HTML에 위의 Rest API에서 받아온 text를 div에 동적으로 출력하는 방식으로 만들 것이다.

먼저 HTML에서 서버에서 받아온 내용을 추가할 div와, 클릭 시 POST와 GET을 수행하는 버튼을 만들자.

<div id="textOutput" style="background-color:#f7ffcc; width:500px; height:150px; text-align:center;">
	이곳은 서버에서 받은 값이 출력될 장소입니다.
</div>
<input type="button" id="postBtn" value="POST 신호 보내기">
<input type="button" id="getBtn" value="GET 신호 보내기">

 

그리고 이제 각 버튼을 눌렀을 때 ajax를 실행하도록 스크립트를 작성한다.

$("#postBtn").click(function() {
	$.ajax({
		type : "POST",
		url : "/api/postTest",
		contentType : "application/json; charset=utf-8",
		dataType : "text",
		data : {
			testData1 : 1,
			testData2 : 2
		},
		success : function(data, state, xhr) {
			$("#textOutput").text(data);
		},
		error : function(xhr, data) {
			alert("통신 실패");
		}
	})
})

$("#getBtn").click(function() {
	$.ajax({
		type : "GET",
		url : "/api/getTest",
		contentType : "application/json; charset=utf-8",
		dataType : "text",
		success : function(data, state, xhr) {
			$("#textOutput").text(data);
		},
		error : function(xhr, data) {
			alert("통신 실패");
		}
	})
})

실행 결과

 

여기서, 데이터를 JSON 방식으로 전송을 할 예정이라 contentType="application/json"으로 주었다.

하지만 이는 서버쪽에 해당 형식의 데이터가 올 것을 의미하지, 데이터 자체를 JSON 포맷으로 바꿔주지 않는다.

 

이는 위와 같이 애초에 JSON 포맷으로 전송을 해도 마찬가지이다.

아래는 위의 JSON 포맷 데이터가 서버로 넘어갈 때의 데이터 포맷인데, 누가 봐도 JSON 포맷은 아니다.

 

상단에 작성한 restController는 String으로 받았기에 에러가 발생하지 않지만, 만약 이를 JSON 형태로 변환할 예정이라면 당연히 에러가 발생할 것이다.

 

그래서 이를 방지하기 위해 위에서 전송하려는 데이터가 JSON 포맷이라면 그냥 전송하지 말고, 다음과 같이 전송하면 에러를 방지할 수 있다.

data : JSON.stringify({
			testData1 : 1,
			testData2 : 2
})