웹개발 교육/Spring

[73일] Spring (14) Ajax - 서버에서 응답 받기

ewok 2022. 11. 9. 12:41

AJAX (Asynchronous JavaScript and XML)

  • 참조 https://www.w3schools.com/js/js_ajax_intro.asp
  • 웹페이지 전체를 reload하지 않고, 일부분만 새로고침(reload) 하는 기술 방식
  • 비동기식 통신(문자단위 통신)
  • 전체 페이지는 1번만 불러오고, 그 이후에는 문자단위(비동기)로 통신이 이루어 진다
  • 자바스크립의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈소스의 ajax()함수를 많이 이용한다

https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:rte3.9:ptl:jquery_ajax 

 

egovframework:rte3.9:ptl:jquery_ajax [eGovFrame]

jQuery는 브라우저 호환성이 있는 다양한 기능을 제공하는 자바스크립트 라이브러리이다. jQuery에서 제공하는 오픈 라이브러리들을 통해 java script로 ajax, event, 다양한 ui 기능 등을 구현할 수 있으

www.egovframe.go.kr

 

 

 jQuery AJAX 관련 메소드

 

 

spring06_ajax 프로젝트

 

pom.xml

		<!-- 사용자 지정 의존성 추가 시작 -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<version>9.0.58</version>
		</dependency>

		<dependency>
			<groupId>com.googlecode.json-simple</groupId>
			<artifactId>json-simple</artifactId>
			<version>1.1.1</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<!-- 사용자 지정 의존성 추가 끝 -->

 

폴더 생성 및 파일 추가

images.zip
2.23MB
jquery.cookie.js
0.00MB
jquery-3.6.1.min.js
0.09MB

 

 

application.properties

server.port=9095

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

server.servlet.jsp.init-parameters.development = true

WEB-INF, views 폴더 생성

 

views 폴더에 ajax 폴더 생성

 

ajaxTest01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest01.jsp</title>
	<script src="../js/jquery-3.6.1.min.js"></script>
	<script src="../js/jquery.cookie.js"></script>
</head>
<body>
	<script>
		alert($);
	</script>
	
	● AJAX (Asynchronous JavaScript and XML)
	  - 참조 https://www.w3schools.com/js/js_ajax_intro.asp
	  - 웹페이지 전체를 reload하지 않고, 일부분만 새로고침(reload) 하는 기술 방식
	  - 비동기식 통신(문자단위 통신)
      - 전체 페이지는 1번만 불러오고, 그 이후에는 문자단위(비동기)로 통신이 이루어 진다
      - 자바스크립의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈소스의 ajax()함수를 많이 이용한다
      
	● jQuery AJAX 관련 메소드
      - 참조 https://www.w3schools.com/jquery/jquery_ref_ajax.asp
      - $.ajax()
      - $.get()
      - $.post()
      - serialize()
      - 응답받은 메세지를 처리하는 함수를 callback함수라 한다
      
</body>
</html>

 

패키지 및 클래스 생성

AjaxtestCont.java

package kr.co.itwill.ajaxtest;

import org.springframework.stereotype.Controller;

@Controller
public class AjaxtestCont {

	public AjaxtestCont() {
		System.out.println("-----AjaxtestCont() 객체 생성됨");
	}//end
	
}//class end

확인

package kr.co.itwill.ajaxtest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AjaxtestCont {

	public AjaxtestCont() {
		System.out.println("-----AjaxtestCont() 객체 생성됨");
	}//end
	
	//결과확인 http://localhost:9095/ajaxtest01.do
	@RequestMapping("ajaxtest01.do")
	public String ajaxTest01() {
		return "ajax/ajaxTest01";
	}//ajaxTest01() end
	
}//class end

 

 

ajaxTest02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest01.jsp</title>
	<script src="../js/jquery-3.6.1.min.js"></script>
	<script src="../js/jquery.cookie.js"></script>
</head>
<body>


	<h3>* $.ajax() 테스트 *</h3>
	
	<button id="btn">* 서버에서 응답받기 *</button>
	<div id="panel"></div>
	
	<script>
		
	//1)$.ajax()함수
	// 형식) $.ajax({name:value, name:value, name:value})
	
	$("#btn").click(function(){
		$.ajax({
					 url      :"message.do"	//요청명령어
					,type     :"get"		//get방식
					,dataType :"text"		//응답메시지 타입
					,error    :function(error){
						alert("에러 : " + error);
					}//error callback 함수
					,success  :function(result){ //result는 서버가 응답해준 메시지
						alert("성공 : " + result);
					}//success callback 함수
		}); //ajax() end
	}); //click() end
	
	
	
	
	</script>
	
      
</body>
</html>

 

AjaxtestCont.java

	//결과확인 http://localhost:9095/ajaxtest02.do
	@RequestMapping("ajaxtest02.do")
	public String ajaxTest02() {
		return "ajax/ajaxTest02";
	}//ajaxTest02() end
	
	@RequestMapping(value = "message.do", method = RequestMethod.GET)
	public void message(HttpServletRequest res, HttpServletResponse resp) {
		try {
			//단순 문자열과 UTF-8 인코딩 방식
			resp.setContentType("text/plain; charset=UTF-8");
			
			//요청한 사용자에게 응답하기 위한 출력 객체
			PrintWriter out = resp.getWriter();
			out.println("서버에서 응답해준 메시지 : ");
			out.println("무궁화 꽃이 피었습니다~");
			out.flush(); //out객체에 남아 있는 버퍼의 내용을 클리어
			out.close();
			
		} catch (Exception e) {
			System.out.println("응답실패 : " + e);
		}//end
	}//message() end

 

result로 받아온 값을 id=panel에 출력해보기

ajaxTest02.jsp

 

 

위 과정을 @ResponseBody를 통해 간소화 할 수 있다.

@ResponseBody
jsp view를 이용하여 출력하지 않고 response 객체에 직접 출력한다.
JSON형식의 출력값

 

AjaxtestCont.java

	//2) @ResponseBody를 활용한 메시지 전송
	//-> jsp view를 이용하여 출력하지 않고 response 객체에 직접 출력한다
	//-> return값 그대로 브라우저에 전송
	@ResponseBody
	@RequestMapping(value = "message.do", method = RequestMethod.GET)
	public String message() {
		return "서버에서 응답해준 메시지 : 무궁화 꽃이 피었습니다~";
	}//message() end

 

 

ajaxTest02.jsp

	//2) $.get()방식
	//AJAX를 GET방식으로 요청하는 방식
	// 형식) $.get("요청명령어", callback함수)
	$("#btn").click(function(){
		$.get("message.do", responseProc);
	});//click() end
	
	function responseProc(result) {
		$("#panel").append(result);
	}//responseProc() end