4. CSR을 위해서 필요한 기술
1) JSON(클라이언트로 전달되는 데이터 형식)
2) 자바스크립트에서 JSON데이터를 접근하는 방식
3) 스프링에서 JSON데이터로 만들어서 response하는 방법
=> 자동으로 JSON데이터를 만들어서 response한다.
(1)라이브러리 추가
4) Ajax(서버로 데이터를 요청하기 위해 사용되는 비동기 방식)
Asynchronous Javascript And XML
- 자바스크립트로 비동기통신을 요청
- XMLHttpRequest객체가 비동기통신을 담당
(1) jQuery의 함수로 Ajax요청
(2) $.ajax()를 이용해서 ajax통신
- jQuery의 메소드를 호출하면서 정의하는 매개변수들(JSON 형식으로 정의)을 적절하게 정의
[매개변수]
url : ajax로 요청할 컨트롤러의 요청 path
type : 요청방식(get/post)
data : 서버로 전송할 데이터(파라미터 - 컨트롤러에서 매개변수로 받을 데이터)
=> 서버로 보내서 처리할 데이터가 여러개이면 json으로 정의하거나 폼데이터로 정의해서 작업이 가능
datatype : ajax통신 결과 데이터 타입 - text, json
success : 서버와 통신이 성공했을때 호출되는 자바스크립트 함수
error : 서버와 통신이 실패했을때 호출되는 자바스크립트 함수
5) 스프링에서 Ajax로 요청받아 JSON데이터로 만들어서 response하는 방법
6) 자바스크립트(JQuery)에서 response받은 JSON데이터를 DOM을 이용해서 원하는 위치에 출력하기
7)Ajax를 쉽게 함수로 만들어놓은 것이 fetch(자바스크립트에 포함된 기술), axios(별도의 라이브러리를 추가) -> 지금 보지는 않을것
실습
etc-tiles.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="etcview/json" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/json.jsp"/>
</definition>
<definition name="etcview/ajax" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/ajax.jsp"/>
</definition>
<definition name="etcview/ajaxexam" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/ajaxexam.jsp"/>
</definition>
</tiles-definitions>
컨트롤러 분리(@RestController와 @Controller)
EtcViewController
@Controller
public class EtcViewController {
//json테스트페이지
@GetMapping("/json/showpage")
public String showJsonPage(){
return "etcview/json";
}
//Ajax테스트페이지
@GetMapping("/ajax/showpage")
public String showAjaxPage(){
return "etcview/ajax";
}
}JSONTestController
//@Controller
//@ResponseBody
//데이터를 리스폰스하는 컨트롤러 - 뷰를 리스폰스하는 메소드는 정의할 수 없다
@RestController
public class JSONTestController {
private BoardService service;
@Autowired
public JSONTestController(BoardService service) {
super();
this.service = service;
}
//기본컨트롤러에서 응답데이터는 html문서이므로 응답데이터가 문자열이라고 알려주어야한다.
//컨트롤러의 메소드 위에 @ResponseBody를 추가하면 이제 더이상 뷰를 응답하지 않고 response body에 스트링을 추가해서 response하겠다는 의미
@GetMapping("/json/getString")
//@ResponseBody
public String responseString(){
return "text data";
}
@GetMapping("/json/getJsonObj")
//@ResponseBody
//스프링MVC(jackson-databind라이브러리와 MVC가 함께 자동작업을 처리)가 BoardDTO를 JSON문자열로 만들어서 리턴
public BoardDTO responseJsonObj() {
return service.getBoardInfo("62");
}
//메소드명 : responseJsonArr
@GetMapping("/json/getJsonArr")
//@ResponseBody
public List<BoardDTO> responseJsonArr() {
System.out.println("@RestController요청");
return service.boardList();
}
}json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3><a href="/erp/json/getString">스트링데이터받기</a></h3>
<h3><a href="/erp/json/getJsonObj">DTO를 json으로 변환해서 받기</a></h3>
<h3><a href="/erp/json/getJsonArr">ArrayList에 저장된 DTO를 json으로 변환해서 받기</a></h3>
</body>
</html>동기통신-비동기통신
ajax, kafka, web socket 등이 비동기통신함
node.js, vertx등..
AjaxTestController
@Controller
@RequestMapping("/ajax")
public class AjaxTestController {
private BoardService service;
public AjaxTestController(BoardService service) {
super();
this.service = service;
}
//동기통신으로 요청을 처리하는 방식
@GetMapping("/noajax")
public String noajax(String id, Model model) {
String msg="";
if(id.equals("jang")) {
msg = "사용불가능아이디";
}else {
msg = "사용가능아이디";
}
model.addAttribute("msg",msg);
return "etcview/ajax";//forward방식
}
//Ajax 요청으로 실행되는 컨트롤러로 String 결과를 클라이언트로 전송
//response는 기존의 방식처럼 view를 response하지않고 response할 데이터의 형식을 리턴타입에 정의
//ajax로 요청하는 경우는 데이터만 요청하는 것이므로 @ResponseBody를 추가하거나 모두 @RestController로 작업을 해야 한다.
//Ajax로 컨트롤러를 요청하면 서버에서 결과를 String이나 JSON으로 만들어서 넘긴다.
//데이터가 많으면 JSON으로 넘기는 연습,,,?
//produces속성에 response되는 데이터형식(MIME type)과 인코딩을 명시
@GetMapping(value = "/ajaxtest01", produces = "application/text;charset=utf-8")
@ResponseBody
public String ajaxtest(String id,String pass) {
System.out.println(id+"========"+pass);
String msg="";
if(id.equals("jang")) {
msg = "사용불가능아이디";
}else {
msg = "사용가능아이디";
}
return msg;
}
@GetMapping(value = "/gugu")
@ResponseBody
public String gugutest(String dan) {
String msg="";
for(int i=1;i<=9;i++) {
msg = msg + dan+" x "+i+" = "+(Integer.parseInt(dan)*i)+"<br>";
}
return msg;
}
@GetMapping("/exam")
public String showexamPage() {
return "etcview/ajaxexam";
}
@GetMapping("/exam01")
@ResponseBody
public BoardDTO getBoardJson(String boardno) {
//@ResponseBody로 정의한후(이거안해서안됐음 .......기억)
//리턴타입을 DTO로 명시하면 jackson-bind라이브러리가 자동으로 DTO객체를 JSON으로 변환해서 리턴
return service.getBoardInfo(boardno);
}
@GetMapping("/exam02")
@ResponseBody
public List<BoardDTO> ListJson() {
return service.boardList();
}
}
ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("test");
$("#noajaxbtn").on("click",function(){
//동기통신 ->location.href에 컨트롤러 연결
location.href = "/erp/ajax/noajax?id="+$("#id").val();
});
$("#ajaxbtn").on("click",function(){
//비동기통신 jQuery의 ajax함수를 이용해서 요청
//비동기방식으로 /erp/ajax/ajaxtest01을 get방식으로 요청하면서 id라는 이름의 파라미터와 입력한 값을 전송
//전송이 성공하면 success_run함수를 호출하고 실패하면 error_run함수를 호출
let querydata = {"id":$("#id").val(),"pass":"1234"}
// ---- ---------------
// name value
$.ajax({
url:"/erp/ajax/ajaxtest01",
type:"get",
data:querydata,
success:success_run,
error:error_run
})
})
$("#guguajaxbtn").on("click",function(){
let querydata99 = {"dan":$("#dan").val()}
$.ajax({
url:"/erp/ajax/gugu",
type:"get",
data:querydata99,
success:gugu_success_run,
error:gugu_error_run
})//end ajax
})//end #guguajaxbtn click
});//end ready
//ajax요청이 성공하면 success_run이 자동으로 호출되면서 실행결과를 success_run의 매개변수로 전달한다.
function success_run(result) {
alert("요청성공: "+result);
$("#result2").html("<h2>jquery: "+result+"</h2>");
}
//ajax요청이 실패하면 error_run이 자동으로 호출
//요청실패를 하는 경우에도 error_run을 호출하면서 여러가지 값들을 전송
//obj - XMLHttpRequest객체
//msg - 응답메세지
//statusMsg - 에러메세지
function error_run(obj, msg, statusMsg) {
alert("요청실패: "+obj+", "+msg+", "+statusMsg);
}
function gugu_success_run(result) {
$("#guguresult").html("<h2>"+result+"</h2>");
}
function gugu_error_run(obj, msg, statusMsg) {
$("#guguresult").html("요청실패: "+obj+", "+msg+", "+statusMsg);
}
</script>
</head>
<body>
<h3>Ajax테스트하기</h3>
<form name="myform">
<input type="text" name="id" id="id"/>
<input type="text" name="name" id="name"/>
<input type="button" value="no ajax 테스트" id="noajaxbtn"/>
<input type="button" value="ajax 테스트" id="ajaxbtn"/>
</form>
<!-- 동기통신의 실행결과는 EL로 표현 -->
<div id="result">${msg }</div>
<!-- 비동기통신의 실행결과는 success_run함수에서 자바스크립트로 생성 -->
<div id="result2"></div>
<h3>구구단출력하기</h3>
<form name="myform">
<input type="text" name="id" id="dan"/>
<input type="button" id="guguajaxbtn" value="구구단출력">
</form>
<div id="guguresult"></div>
</body>
</html>ajaxexam.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testbtn").on("click",function(){
let querydata = {"boardno":$("#boardno").val()}
$.ajax({
url:"/erp/ajax/exam01",
type:"get",
data:querydata,
dataType:"json",
success:function (result) {
alert(result+" : "+result.board_no)
$("#no").html(result.board_no);
$("#title").html(result.title);
$("#writer").html(result.id);
$("#content").html(result.content);
},
error:error_run
})
})
$("#testjsonbtn").on("click",function(){
$.ajax({
url:"/erp/ajax/exam02",
type:"get",
dataType:"json",
success:function (result) {
//JSONArray객체는 자바스크립트에서 배열처럼 처리
//let myarr = [10,20,30]
//json array 데이터를 꺼내서 출력할 수 있도록 저장할 수 있는 변수
for(const value of result){
console.log(value);
}
let data="";
/* for(let i=0;i<result.length;i++){
data = data + result[i].board_no +" "+ result[i].title
+" "+ result[i].id +" "+ result[i].content +"<br/>"
} */
/* result.forEach(value => {
data = data + value.board_no +" "+ value.title
+" "+ value.id +" "+ value.content +"<br/>"
}) */
result.filter(value => value.board_no<=50)
.forEach(value => {
data = data + value.board_no +" "+ value.title
+" "+ value.id +" "+ value.content +"<br/>"
})
$("#printarr").html(data)
},
error:error_run
})
})
});//end ready
function error_run(obj, msg, statusMsg) {
$("#result").html("요청실패: "+obj+", "+msg+", "+statusMsg);
}
</script>
</head>
<body>
<form>
글번호:<input type="text" name="boardno" id="boardno"/>
<input type="button" value="ajax_jsonobj" id="testbtn"/>
<input type="button" value="ajax_jsonarr" id="testjsonbtn"/>
</form>
<div id="result">
<h4>글번호:<span id="no"></span></h4>
<h4>제목:<span id="title"></span></h4>
<h4>작성자:<span id="writer"></span></h4>
<h4>내용:<span id="content"></span></h4>
</div>
<div id="printarr">
</div>
</body>
</html>
미션
구구단 출력 버튼을 누르면 입력한 구구단에 대한 정보를 컨트롤러에서 가져오도록 처리하세요
요청url : /erp/ajax/gugu
파라미터:dan(출력할 구구단)
서버에서 만들어낸 구구단문자열을 return할 수 있도록 작업하기
미션
[ajax테스트]버튼을 누르면 글번호에 입력한 게시글에 대한 Ajax요청으로 조회해서 출력할 수 있도록 작업하세요
path :/erp/ajax/exam01
컨트롤러의 리턴타입은 조회한 게시글의 DTO
Ajax요청에서 success함수에서 json객체에서 결과를 출력할 수 있도록 작업하세요
- 컨트롤러에서 DTO를 response하면 스프링MVC가 자동으로 JSONObject를 만들것이고
그걸 json오브젝트.board_no 이런식으로 호출해서 쓰는거고
result가 json오브젝트라고 생각 - BoardDTO를가지고 자동으로 JSON을 만들기때문에 DTO의 멤버변수가 자연스럽게 JSON이 이름들이 됨
미션
jax_jsonarr버튼을 누르면 전체 게시글목록을 Ajax요청으로 조회해서 출력할 수 있도록 작업
path:/erp/ajax/exam02
컨트롤러의 리턴타입은 조회한 전체 게시글목록의 List
Ajax요청에서 success함수에서 JSONArray의 결과를 출력할 수 있도록 작업하세요
- text()는 html태그를 실행하지 못함
- < br>은 html태그이므로 html태그가 실행될 수 있도록 html()를 호출
- 추가방법 몇개알려주심
IndexController
mainContent.jsp
BoardController
본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.
