[자바스크립트] Spring에서 Ajax 사용하기

Whatever·2022년 3월 17일
0

자바스크립트

목록 보기
23/24

@ResponseBody를 사용하면 return 값이 그대로 브라우저에 전송된다.

//현재 시대적 추세가 백엔드를 이해하는 프론트엔지니어를 원함
//@ResponseBody를 쓰면 return 값이 그대로 브라우저로 전송됨
//@Controller + @ResponseBody를 @RestController를 쓰기도 함
//@ResponseBody 보통 method위에 붙여준다.
@Controller
public class AjaxController {
	
	@ResponseBody
	@RequestMapping(value = "/testResponse", method = RequestMethod.GET)
	public String returnDirect() {
		return "It's Rainning";
	}
}

=> It's Rainning이라는 JSP를 찾는게 아니라 It's Rainning을 그대로 브라우저에 출력한다.

@Controller
public class AjaxController {
	
	@ResponseBody
	@RequestMapping(value = "/testResponse", method = RequestMethod.GET)
	public Map<String, String> returnDirect() {
		Map<String, String> myMap = new HashMap<String, String>();
		
		myMap.put("비", "0");
		myMap.put("비비", "00");
		myMap.put("비비비", "000");
		myMap.put("비비비비", "0000");
		
		//보통 List나 Map을 많이 리턴함
		return myMap;
	}
}

=> 에러 발생(브라우저는 자바의 Map을 모르기 때문에)

list나 Map을 json형식으로 변환시켜줘야 함.
이걸 가능하게 해주는 것이 Maven Repository의 Jackson Databind

최신버전 선택해서 가져오기 > pom.xml에 붙여넣고 Run As > 4. Maven

list나 Map을 xml로 바꿔주는 것은 Jackson Dataformat

위 두 가지를 pom.xml에 적용 후, Map을 출력한다.

Map을 xml이 아닌 jason으로 출력하고 싶을 때 :

Get 방식

Controller

package kr.or.ddit.car;

import java.util.HashMap;
import java.util.Map;

import org.apache.commons.collections.map.HashedMap;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

//현재 시대적 추세가 백엔드를 이해하는 프론트엔지니어를 원함
//@ResponseBody를 쓰면 return 값이 그대로 브라우저로 전송됨
//@Controller + @ResponseBody를 @RestController를 쓰기도 함
//@ResponseBody 보통 method위에 붙여준다.
@Controller
public class AjaxController {
	
	@ResponseBody
	@RequestMapping(value = "/testResponse", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
	public Map<String, String> returnDirect(String myParam1) {
		System.out.println(myParam1); // 값 넘어왔는지 체크
		Map<String, String> myMap = new HashMap<String, String>();
		
		myMap.put("비", "0");
		myMap.put("비비", "00");
		myMap.put("비비비", "000");
		myMap.put("비비비비", "0000");
		
		//보통 List나 Map을 많이 리턴함
		//브라우저는 자바의 Map을 모르기 때문에, 사전에 에러가 남
		return myMap;
	}
}

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<input type="button" id="id_btn1">
<script type="text/javascript">
var v_btn1 = document.querySelector("#id_btn1");
var v_ajax = new XMLHttpRequest(); // 통신 대신 해줄 아저씨 생성
 v_ajax.open("get", "/testResponse?myParam1=batman", true) // 아저씨가 할일 지정 - true는 비동기, false는 동기 
 v_ajax.onreadystatechange = function(){ // 상황 변화 있으면 연락주세요 
	
 	if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 잘 완료되었다면 
 		console.log(JSON.parse(v_ajax.responseText));  //json형식으로 변환(JSON.parse)
 	} 
 } 
 v_ajax.send();	//아저씨 일 하세요 
 console.log("콘솔에 찍기"); 

</script>
</body>
</html>

Post 방식

Controller

@Controller
public class AjaxController {

	@ResponseBody
	@RequestMapping(value = "/testResponse", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
	public Map<String, String> returnDirectPost(String myParam1) {
		System.out.println(myParam1); // 값 넘어왔는지 체크
		Map<String, String> myMap = new HashMap<String, String>();
		
		myMap.put("비", "0");
		myMap.put("비비", "00");
		myMap.put("비비비", "000");
		myMap.put("비비비비", "0000");
		
		//보통 List나 Map을 많이 리턴함
		//브라우저는 자바의 Map을 모르기 때문에, 사전에 에러가 남
		return myMap;
	}
}

JSP

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<input type="button" id="id_btn1">
<script type="text/javascript">
var v_btn1 = document.querySelector("#id_btn1");

var v_ajax = new XMLHttpRequest(); // 통신 대신 해줄 아저씨 생성
 //v_ajax.open("get", "/testResponse?myParam1=batman", true) // 아저씨가 할일 지정 - true는 비동기, false는 동기 Get방식일때 parameter로 넘기고
 v_ajax.open("post", "/testResponse", true)  //Post방식일 때 
//post방식으로 보낼 때 아래 내용 필요, jQuery Ajax는 자동으로 항상 해줌 - 꼭 send 전에 해줘야함
 v_ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 
 v_ajax.onreadystatechange = function(){ // 상황 변화 있으면 연락주세요 
	
 	if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 잘 완료되었다면 
 		console.log(JSON.parse(v_ajax.responseText));  //json형식으로 변환(JSON.parse)
 	} 
 } 
// v_ajax.send();	//get 방식일 때 사용
 v_ajax.send("myParam1=wonderWoman");	//post 방식일 때 send안에 넘길 값 적어줌 
 
 console.log("콘솔에 찍기"); 

</script>
</body>
</html>

0개의 댓글