과제로 댓글 기능까지 만들었고, 이건 추후에 설계도까지 그린 다음에 업뎃할 예정이다.
실질적으로 게시판 전체를 만드는? (로그인, 회원가입, 게시판, 댓글) 과정은 다했다.
하지만 각 기능을 구현하면서 페이지 전환을 통해서 데이터, UI를 주고받는 건 한계가 있었다. 예를 들어 회원가입할 때, ID중복확인 기능에서 팝업을 띄우지 않으면 데이터를 전송할 수가 없었다. 만약 데이터를 전송하면 회원가입이 끝나지도 않았는데, 회원가입 데이터가 서버로 들어간다.
따라서 데이터만 주고 받기 위해서, 이번 시간에는 ‘비동기 통신’을 배워보기로 했다.
📝목차
- AJAX
- 사용법
1. AJAX ( Asynchronous Javascript And XML )
AJAX는 클라이언트와 서버 간의 비동기 통신을 위한 자바스크립트 메서드다.
1) Asynchronous Javascript
먼저 비동기 통신부터 살펴보자.
HTTP를 사용하는 클라이언트와 서버는 요청-응답의 관계를 갖는다. 이 관계는 딱히 비동기가 된다고 해서 변하지는 않는다.
다만 동기 통신에선 요청 후, 응답이 오면 요청을 보낸 화면이 이동하였다. 즉, 우리가 보는 화면의 생명 주기는 다음 Request가 나가기 전까지 유지되는데, 이게 동기 통신의 주된 특징이다.
이런 관계에서 AJAX를 사용해 비동기 통신을 하면 Request 이후, 화면이 전환되지 않는다. 이는 비동기 통신이 자신의 페이지를 유지하면서 서버에게 요청하여, 해당 페이지의 생명 주기가 늘어났기 때문이다.
2) XML
XML은 Mark Language의 한 종류로서, 데이터를 구조화시켜서 표현하는 문서를 작성하는 방식이다. 비동기 방식에서는 HTML이 아닌 바로 XML을 썼다. 정확히는 “사용했었다”가 맞는 표현일 것이다.
아무튼, 이는 비동기의 목적이 HTML을 이용한 화면전환이 아닌 데이터 전달이기 때문이다. 이때 데이터의 형식과 그 크기는 프로그램에 따라 다르기에 XML로 직렬화-역직렬화하여 데이터를 주고 받는다.
따라서 비동기의 응답은 ‘데이터’가 담겨 있다. 그러나 현재는 XML 대신 JSON을 사용해 데이터를 구조화시켜 전달한다.
< 요약 >
| 목적 | 응답 | 방식 | 생명 주기 | 응답 후 화면 | |
|---|---|---|---|---|---|
| 동기 | 화면 전환 | 소스파일 | HTML | 다음 리퀘스트 전 | 렌더링 후 전환 |
| 비동기 | 데이터 통신 | 데이터 | JSON (XML) | 유지 | 유지 |
< 생각해볼 점 >
- 페이지 전환없이, 데이터를 주고 받는 건 쩌는 기술이다.
- 동기나 비동기나 응답은 String으로 받는다. 다만 동기는 소스 코드를 받아 브라우저에 렌더링을 시키지만, 비동기는 그냥 받는다.
2. 사용법
[ UI ]
<button id="ajax01">AJAX01</button>
<button id="ajax02">AJAX02 with parameter</button>
<button id="ajax03">AJAX03 Server response1</button>
<div id="ajax03_result">
<button id="ajax04">AJAX04 Server response2</button>
<button id="ajax05">AJAX04 Server response3</button>
<button id="ajax06">AJAX04 Server response4</button>1) 함수 호출
ajax는 함수이기 때문에, Jquery에서는 다음과 같이 호출한다.
물론 자바스크립트 함수라서 바닐라로 사용할 수 있다. 제이쿼리는 비동기에 특화되어 있기 때문에 더욱 편리하다.
$("#ajax01").on("click", function(){
$.ajax();
});2) JSON 형태로 인자값을 만든다.
$("#ajax02").on("click", function(){
$.ajax({
url : "/exam02.ajax",
data : {fruits:"Apple"}
// 데이터는 ‘data’ 안에만 들어간다. 다양한 객체를 보낼 수 있는데, 이 역시 JSON으로 보낼 수 있다.
});
});
기본적으로 콜백 패턴을 적용한다. 그리고 함수의 인자값은 JSON의 형식으로 집어넣어 준다. 위에서는 ‘AJAX02’ 버튼을 누르면 해당 url로 호출을 넣도록 설정하였다.
그리고 data안에 들어가 있는 값은, 우리가 url파라미터로 보내는 값처럼 요청에 담겨서 컨트롤러로 넘겨줄 수 있다.
3) 데이터 받고 출력하기
데이터를 넘겨주는 것도 중요하지만, 비동기의 꽃은 컨트롤러부터 페이지 전환없이 데이터를 받아와서 이를 페이지에 뿌려줄 수 있다는 것이다.
기본적으로 데이터는 String의 형태로 주고 받기 때문에, 컨트롤러 측에서 보내줄 때는 다음과 같이 JSON 형식에 맞춰서 보내줘야 한다.
// 컨트롤러로 배열 보내기
String[] arr = new String[] {"Apple", "Orange", "Banana"};
PrintWriter pw = response.getWriter();
pw.append("[");
pw.append("\""+arr[0]+"\", ");
pw.append("\""+arr[1]+"\", ");
pw.append("\""+arr[2]+"\"");
pw.append("]");일단 비동기 측에서 데이터를 받는 방식은 후술하고, 기본적으로 데이터를 보내기 위해서 Response 객체에서 PrintWriter을 꺼내서 보내주는 방식을 사용한다. 즉, append 하나가 응답 한 개다.
그러나 위 방식이 아닌 arr이라는 배열을 통째로 append로 보내게 되면, ajax 자체선 이를 “ {"Apple", "Orange", "Banana"} ” 라는 한 개의 String으로 받는다.
따라서 ajax에서 받아들 일 수 있겠끔, JSON의 형태로 데이터를 보내게 되면 ajax에선 이를 JSON의 형태로 파싱하여 사용한다. 물론 이 방식은 굉장히 번거롭기 때문에 GSON이라는 구글 JSON 라이브러리를 사용한다.
- String
$("#ajax03").on("click", function(){
$.ajax({
url : "/exam03.ajax",
}).done(function(resp){ // 통신(요청-응답)이 완료되면 실행되는 call back
$("#ajax03_result").text(resp);
});
});ajax를 통해 요청이 들어가고, 컨트롤러부터 응답이 돌아오면 .done(); 함수를 호출하여 처리할 수 있다. 이 또한 콜백 패턴이며, 응답은 resp 라는 변수에 담겨 있어, 이를 사용하여 처리할 수 있다.
- 배열
$("#ajax04").on("click", function(){
$.ajax({
url : "/exam04.ajax",
}).done(function(resp){
let result = JSON.parse(resp);
console.log(result);
});
});위에서 보낸 배열은 resp에 연결되어 있다. 이를 JSON.parse() 함수에 넣으면 자동으로 분석해줘서 사용할 수 있다.
- 객체
[ 데이터 전송 ]
if (uri.equals("/exam05.ajax")) {
Gson g = new Gson();
CoffeDTO dto = new CoffeDTO(1005, "Americano", 3000, "Y");
PrintWriter pw = response.getWriter();
pw.append(g.toJson(dto));
}[ 데이터 처리 ]
$("#ajax05").on("click", function(){
$.ajax({
url : "/exam05.ajax",
}).done(function(resp){
let result = JSON.parse(resp);
console.log(result.name); // “Americano”
console.log(result.price); // 3000
});
});배열 뿐만 아니라, 객체도 받을 수 있다. 이를 처리하기 위해선 기본 사용법인 .을 통해서 원하는 값을 꺼내 쓰면 된다.
- 객체 배열
[ 데이터 전송 ]
if (uri.equals("/exam06.ajax")) { // 객체 배열 보내기
Gson g = new Gson();
List<CoffeDTO> list = new ArrayList<CoffeDTO>();
list.add(new CoffeDTO(1005, "Americano", 3000, "Y"));
list.add(new CoffeDTO(1006, "Cafe Latte", 5000, "N"));
list.add(new CoffeDTO(1007, "Orange Juice", 4000, "Y"));
PrintWriter pw = response.getWriter();
String result = g.toJson(list);
pw.append(result);
}[ 데이터 처리 ]
$("#ajax06").on("click", function(){
$.ajax({
url : "/exam06.ajax",
dataType:"json" // == JSON.parse();
}).done(function(resp){
// 반복문으로 출력한다.
for(let i=0; i<resp.length; i++){
console.log(resp[i].name + " : " + resp[i].price)
}
});
});
< 생각해볼 점 >
- 일단 비동기 ajax의 포인트는 페이지 전환 없는 데이터 교환이다.
- 이를 사용하면, 데이터를 받을 때마다 UI가 생성될 수 있도록 만들 수 있다.
