1️⃣ HttpSession을 이용해서 요청에 응답한다면?
👉🏻 여러 개의 데이터가 띄어쓰기 없이 연달아서 응답됨
👉🏻 따로 통로를 열어 보낼 수는 있지만 보내면 한 개의 문자열로 연이어서 보내는 꼴
👉🏻 구문을 하나씩 써야 하기 때문에 귀찮고, 구분자도 없어서 구분이 힘듦!
💻 index.jsp
👉🏻 요청은 그대로 받음(수정 내용 없음)
<h3>1. 요청 시 값 전달, 응답 결과 받아보기</h3>
이름: <input type="text" id="name"> <br>
나이: <input type="number" id="age"> <br>
<button onclick="test1();">전송</button>
<div id="result1"></div>
<script>
function test1() {
$.ajax({
url : "ajax1.do",
type : "get",
data : {
name : $("#name").val(),
age : $("#age").val()
},
success : function(result) {
// console.log(result);
$("#result1").text(result);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
💻 HttpSession 형식을 이용한(기존 방법의) AjaxController
// 다수의 응답 데이터가 있을 경우
@RequestMapping("ajax1.do")
public void ajaxMethod1(String name, int age, HttpServletResponse response) throws IOException {
// 요청 처리가 다 되었다는 가정 하에 데이터 응답
response.setContentType("text/html; charset=UTF-8");
response.getWriter().print(name);
response.getWriter().print(age);
}
👉🏻 띄어쓰기 없이 연달아서 응답됨
2️⃣ JSON(JavaScript Object Natation) 형태로 응답하기
👉🏻 JSONArray로 처리한다면 [값, 값, 값, ...]의 꼴로 자바스크립트의 배열 형식(자바로 따지면 ArrayList)으로 표현 가능
즉, 여러 개의 데이터 응답이 필요하다면 JSON 형식을 이용하면 더 좋음!
🔑 먼저 Maven Repository를 통해 JSON 라이브러리 추가
Maven Repository 접속 후 JSON을 검색하여 1.1.1 버전 dependency 코드 복사하기
💻 pom.xml에 추가하기
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
2️⃣-1️⃣. JSONArray로 담아서 응답하기
👉🏻 객체에서 속성값에 접근할 경우: 객체명[0부터시작하는index]
⌨️ AjaxController
// 다수의 응답 데이터가 있을 경우
@RequestMapping("ajax1.do")
public void ajaxMethod1(String name, int age, HttpServletResponse response) throws IOException {
// 1. JSONArray로 담아서 응답
JSONArray jArr = new JSONArray(); // []: 이 시점에 빈 배열 생성됨
jArr.add(name); // ["홍길동"]
jArr.add(age); // ["홍길동", 30]
response.setContentType("text/html; charset=UTF-8");
response.getWriter().print(jArr);
}
⌨️ index.jsp
👉🏻 콘솔로 값이 어떻게 찍히나 확인해 보기 위해 jsp에서 result 결과값 칸 주석 후 콘솔 주석 푼 뒤에 출력해 봄
<script>
function test1() {
$.ajax({
url : "ajax1.do",
type : "get",
data : {
name : $("#name").val(),
age : $("#age").val()
},
success : function(result) {
console.log(result);
// $("#result1").text(result);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
📍 왜 ArrayList가 아닌 문자열로 출력될까?
👉🏻 니가 setContentType을 json 형식이 아닌 문자열로 보냈잖아!
💻 json 방식으로 응답한다고 지정해 준 뒤의 AjaxController
// 다수의 응답 데이터가 있을 경우
@RequestMapping("ajax1.do")
public void ajaxMethod1(String name, int age, HttpServletResponse response) throws IOException {
// 1. JSONArray로 담아서 응답
JSONArray jArr = new JSONArray(); // []: 이 시점에 빈 배열 생성됨
jArr.add(name); // ["홍길동"]
jArr.add(age); // ["홍길동", 30]
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(jArr);
}
💻 index.jsp
<script>
function test1() {
$.ajax({
url : "ajax1.do",
type : "get",
data : {
name : $("#name").val(),
age : $("#age").val()
},
success : function(result) {
// console.log(result);
// 응답 데이터가 한 개일 경우
// $("#result1").text(result);
// 응답 데이터가 여러 개일 경우(JSONArray로 보냈을 경우)
var resultStr = "이름: " + result[0] + "<br>"
+ "나이: " + result[1] + "<br>";
$("#result1").html(resultStr);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
2️⃣-2️⃣. JSONObject로 담아서 응답하기
👉🏻 객체에서 속성값에 접근할 경우: 객체명.속성명
⌨️ index.jsp
<script>
function test1() {
$.ajax({
url : "ajax1.do",
type : "get",
data : {
name : $("#name").val(),
age : $("#age").val()
},
success : function(result) {
console.log(result);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
💻 AjaxController
// 다수의 응답 데이터가 있을 경우
@RequestMapping("ajax1.do")
public void ajaxMethod1(String name, int age, HttpServletResponse response) throws IOException {
// 2. JSONObject로 담아서 응답
JSONObject jObj = new JSONObject(); // {}
jObj.put("name", name); // {name:"홍길동"}
jObj.put("age", age); // {name:"홍길동", age:30}
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(jObj);
}
👉🏻 JSONObject 형식으로 잘 나옴
💻 index.jsp
<script>
function test1() {
$.ajax({
url : "ajax1.do",
type : "get",
data : {
name : $("#name").val(),
age : $("#age").val()
},
success : function(result) {
// 응답 데이터가 여러 개일 경우(JSONObject로 보냈을 경우)
// => 객체에서 속성값에 접근할 경우: 객체명.속성명
var resultStr = "이름: " + result.name + "<br>"
+ "나이: " + result.age + "<br>";
$("#result1").html(resultStr);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
여기까지는 여태까지 쓰던 response 객체를 사용한 방식임
여기서부터 response 객체를 사용하지 않는 방법
💻 AjaxController
👉🏻 produces 속성에 넘길 데이터 형식을 application/json으로 꼭 지정해 줄 것 (text/html로 적으면 문자열로만 넘어감)
👉🏻 return 시 String형으로 넘기기 위해 toJSONString 메소드를 연결시켜 주면 넘길 때는 문자열이지만 이건 객체야! 라고 알려 주는 꼴이 됨
// 여러 개의 응답 데이터를 넘기는 경우 (response 객체 사용 안 함)
@ResponseBody
@RequestMapping(value="ajax1.do", produces="application/json; charset=UTF-8")
public String ajaxMethod1(String name, int age) {
// 다수의 응답 데이터가 있다라는 가정 하에 JSONObject 타입으로 넘기기
JSONObject jObj = new JSONObject(); // {}
jObj.put("name", name); // {name:"홍길동"}
jObj.put("age", age); // {name:"홍길동", age:30}
return jObj.toJSONString();
}