<< 학습 목표 >>
1. 서버가 클라이언트에게 JSON 데이터를 전달할 수 있다.
2. 클라이언트는 서버가 보낸 JSON 데이터를 받을 수 있다.
3. 자바의 객체를 JSON 객체로 변환할 수 있다.
지금까지 서버가 "결괏값" 을 전달하는 방법, "결괏값을 담은 페이지"를 전달하는 방법, "상태 코드"를 전달 하는 방법을 배웠음
이 방법들은 각자 사용하는게 아닌 다같이 종합해서 사용함
1. 상태 코드 + 결괏값
2. 상태 코드 + 결괏값을 담은 페이지
이번에는 결괏값에 단순한 형태의 값이 아닌 정보를 담는 방법을 배워보자
클라이언트에 정보를 전달할 때는 JSON 형식으로 전달해주는게 좋음
그래야 클라이언트가 받아서 사용하기 편함
클라이언트에 정보를 전달하는 방법은 매우 간단함
앞서 배운것들만 제대로 복습했다면 "다를거 없네?" 라고 생각이 들 것
우선 JSON 데이터를 전달할 서버부터 만들자
chapter04 -> SendJson 서블릿을 만들고 아래 코드를 넣자
package chapter04;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
@WebServlet("/chapter04/send_json")
public class SendJson extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
JSONObject jo = new JSONObject();
jo.put("name", "홍길동");
jo.put("age", 21);
jo.put("height", 178.1);
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
PrintWriter pw = response.getWriter();
pw.print(jo);
}
}
자바에서 JSON을 사용해야하므로 JSON 라이브러리를 추가해야함
JSON 라이브러 추가하는 방법을 잊었다면 이 글을 보고 오자 ( https://codingaja.tistory.com/33 )
서블릿이 클라이언트에게 JSON을 전달해야하므로 타입이 JSONObject, JSONArray 등인 객체를 생성해 그 안에 전달할 정보를 저장함(1)
그 후 응답 정보(HttpServlerResponse) 헤더의 content-type 을 application/json 으로 해야함(2)
그 다음 평소와 같이 PrintWriter 객체를 꺼내서 JSON 을 print 하면 끝!(3)
이번에는 서버로 요청을 보내고 서버가 보낸 JSON 데이터를 받을 웹 페이지를 만들자
chapter04 -> receiveJson.html 을 추가하고 아래 코드를 입력하자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버에게 JSON을 받는 페이지</title>
</head>
<body>
<button type="button" onclick="request()">요청</button>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script type="text/javascript">
function request() {
$.ajax({
url: "",
type: "GET",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function() {
alert("어떤 문제가 생김");
}
});
}
</script>
</body>
</html>
클라이언트의 ajax에서 오랜만에 또는 처음보는 속성이 있음
dataType
dataType 속성은 서버가 어떤 형태의 데이터를 보냈는지 미리 적어두는 속성으로 dataType: "json" 이므로 "서버가 json 데이터를 보낼꺼야" 라고 말하는 것
dataType: "text" 라면 "서버가 text 데이터를 보낼꺼야" 라고 말하는 것
dataType과 MIME-TYPE은 다른것이므로 MIME-TYPE 형식으로 적으면 안되고 쓸 수 있는 값 또한 정해져있음
| dataType 에 쓸 수 있는 값 |
| 1. "xml" : 서버가 xml 데이터를 보낼꺼야 2. "html" : 서버가 html 데이터를 보낼꺼야 3. "script" : 서버가 script 데이터를 보낼꺼야 4. "json" : 서버가 json 데이터를 보낼꺼야 5. "jsonp": 서버가 보낸 데이터를 지정한 함수가 반환한 값으로 JSON 데이터로 처리하겠다 6. "text" : 서버가 text 데이터를 보낼꺼야 ( jsonp 의 경우는 이해할 필요는 없음 / 이런게 있다 정도로만 알면 됨 ) |
위 ajax 를 역할별로 분류해보면 해당 속성, 값을 사용해서 요청 정보를 생성하고 요청을 보냄(1)
응답이 오면 해당 속성, 값을 사용해서 응답 정보를 분석해 success 또는 error 의 function 이 동작함(2)
이제 서버를 시작하고 웹 페이지에서 [ 요청 ] 버튼을 눌러보자
서버가 보낸 데이터를 success: function의 data 매개변수가 받았음
그 후 success: function 안의 코드가 동작해 전달 받은 json 데이터를 console 에 출력하고 있음
결과를 확인하려면 브라우저 -> 개발자 모드 -> [ console ] 패널 을 확인해보자
여기까지 서바가 JSON 데이터를 전달하고 클라이언트가 JSON 데이터를 받는 방법을 알아봤음
주된 내용은 여기까지가 끝! 인데 한 가지만 더 알아보고 마무리하자
자바에서는 JSON 보다 클래스, 객체를 사용해서 정보를 저장함
보통 이렇게 정보를 저장하는 객체를 DTO 또는 VO 라고 부름
서버에서는 다음과 같이 홍길동의 정보를 객체에 저장해뒀음(1)
이 객체가 갖고 있는 정보를 클라이언트에게 전달해줘야할 때는 어떻게할까?
다음과 같이 JSONObject 를 만들어 담은 다음(2)에 우리가 앞서 했듯이 JSONObject를 print 하면 됨(3)
클라이언트가 서버로 JSON 데이터를 보내는 일은 취업하기 전까지 없을 수 있지만 서버가 클라이언트에게 JSON 데이터를 보내야하는 일은 있을 수 있으니 잘 기억해둬야함
'Servlet + JSP > Serlvet-Chapter04' 카테고리의 다른 글
| Chapter04. 포워딩(Forwarding) / 클라이언트 몰래 요청 넘기기 (2) | 2023.03.03 |
|---|---|
| Chapter04. 포워딩(Forwarding) / 클라이언트에게 "여기로 가!" 지시하기 (0) | 2023.03.02 |
| Chapter04. 클라이언트에게 상태 코드 담아 전달하기 (0) | 2023.03.02 |
| Chapter04. 클라이언트에게 페이지 전달하기 (0) | 2023.03.01 |
| Chapter04. 서버가 클라이언트에게 처리 결과 전달(응답) 하기 (0) | 2023.03.01 |