I T H

[스프링프로젝트연습 10] 스프링 프로젝트 구현 - ajax 사용법 본문

Spring Basic

[스프링프로젝트연습 10] 스프링 프로젝트 구현 - ajax 사용법

thdev 2024. 1. 22. 14:35
1. Asynchronous javascript And Xml(비동기식 자바 스크립트와 xml)의 약자
2. 자바 스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
3. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

- 해당 문서에서는 ajax를 활용한 컨트롤러 호출 및 데이터를 화면에 출력하는 것으로 사용 방법에 대해 설명한다.

 

[동기 방식 VS 비동기 방식]

- 동기 방식 : 특정 일 처리를 시작과 끝을 모두 확인하고 다음 순서의 일 처리로 넘어가는 방식

- 비동기 방식 : 특정 일 처리를  병행하여 처리하는 방식

 

[ AJAX 를 활용한 GET 방식 컨트롤러 호출 ]

앞서 작성한 버튼을 클릭하는 경우

Ajax 를 통해 컨트롤러를 호출하여 데이터베이스의 현재 시간을 전달받아 화면에 출력하는 테스트를 진행하고자 한다.

 

1. Json 라이브러리 의존성 주입

- 화면에서 데이터를 전달( json) 하고 컨트롤러를 통해 데이터를 화면에 전달 받을 때(json) 

  json 형태의 데이터를 사용하기 위해 라이브러리를 다운로드

- Pom.xml에 json 관련 라이브러리 의존성을 주입한다. (자동으로 Json타입으로 객체를 변환해 브라우저에 전달한다.)

- 앞서 3장 공통 부분에서 이미 작성하였으면 아래 내용은 패스한다.

<!-- json -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.9.4</version>
		</dependency>
		
		<dependency>
		    <groupId>com.fasterxml.jackson.dataformat</groupId>
		    <artifactId>jackson-dataformat-xml</artifactId>
		    <version>2.9.6</version>
		</dependency>
		
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.2</version>
		</dependency>

 

2. 컨트롤러 GET 메서드 생성

- kr.co.values.web 패키지 아래에 있는 MainController.java 컨트롤러 클래스 파일에 아래 내용을 추가한다.

- 화면에서 ajax를 통해 컨트롤러 호출 시 사용될 컨트롤러 메서드 1개 생성한다.

- GET 방식으로 파라미터가 없는 테스트 메서드를 생성한다.

- @ResponseBody : 호출한 화면에 값을 전달하기 위해 사용 (리턴 타입에 맞는 메시지 컨버터를 통해 자동 변환이 됨)

- 메서드로 전달되는 파라미터는 없으므로 생략 가능

- 파라미터가 있는 경우에는 @RequestParam Map<String, Object> params 형태로

getDateTime(@RequestParam Map<String, Object> params)와 같이 삽입해 준다.

- 매퍼를 이용하여 데이터베이스의 현재 시간을 조회한 후 결과값(스트링)을 Map에 담아서 화면에 Map 형태를 리턴하는 메서드를 작성

- 화면에는 Map 형태의 json 데이터를 전달 받을 수 있도록 작성함.

//GET 방식 호출 테스트
	@RequestMapping("/main/list.do")
	@ResponseBody
	public Map<String, Object> getDateTime(){
		System.out.println("get test");
		
		String dateTime = mainMapper.getTime();
		
		Map<String, Object> result = new HashMap<String, Object>();
		result.put("date",dateTime);
		
		return result;
	}

 

3. JSP 화면 내 ajax 호출 코드 작성

- /src/main/webapp/WEB_INF/views/main 폴더 아래에 있는 home.jsp 파일에 아래 스크립트를 추가함.

- 먼저 페이지 인코딩(한글깨짐방지)를 위해 아래 구문을 JSP 상단에 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

 

- 버튼 하단에 데이터베이스 현재시간을 출력하고자 h3 태그와 input 태그 1개를 작성하고 해당 태그에 아이디를 매핑해 준다.

- 단순 텍스트를 화면에 출력하고자 h3 태그를 사용했을 뿐 div / span / label 등을 사용해도 무방함.

<body>
	<h2>Hello Home!!!</h2>
	<button id="test">button</button>
	<h3 id="resultText"></h3>
	<input type="text" id="resultText2" />
</body>

 

- 버튼 클릭 이벤트 함수 내에 ajax call 처리 부분의 스크립트를 작성해 준다.

- Type: GET/ POST 중 1개를 사용

- url : 컨트롤러에 매핑된 리퀘스트매핑 주소를 작성, 이 때 컨텍스트 경로가 있는 경우에는 컨텍스트 경로까지 포함하여 준다. 해당 프로젝트에는 " / "가 경로이므로, /main/list.do 형태로 url을 작성하였음.

- contentType : 서버로 전달될 데이터 타입 및 인코딩 정보를 작성한다. Json 형태로 파라미터를 전달하기 위해 json 타입의 설정을 해주었다.

- dataType : 화면에 전달받을 데이터 타입을 지정하여 준다.

- Success : ajax 호출에 성공한 경우 작성된 함수를 실행하게 된다.

- Error: ajax 호출에 실패한 경우 작성된 함수를 실행하게 된다.

<script type="text/javascript">
	$("#test").on("click", function(){
		
		$.ajax({
			type: "GET",
			url: "/main/list.do",
			contentType:"json",
			success:function(data){
				console.log("통신데이터 값:");
				console.log(data);
				$("#resultText").html(data.date);
				$("#resultText2").val(data.date);
			},
			error: function(){
				console.log('통신실패!!');
			}
		});
	});
</script>

 

'Spring Basic' 카테고리의 다른 글

[스프링프로젝트연습 12] 스프링프로젝트 구현 - ajax사용 /CRUD-SELECT  (0) 2024.01.22
[스프링프로젝트연습 11] 스프링프로젝트 구현 - ajax사용/CRUD - INSERT  (0) 2024.01.22
[스프링프로젝트연습 9] 스프링 프로젝트 구현 - jQuery 연동  (0) 2024.01.22
[스프링프로젝트연습 7] 스프링 프로젝트 구현 - Log4j2 연동  (0) 2024.01.22
[스프링프로젝트연습 6] 스프링 프로젝트구현 - SVN 연동  (0) 2024.01.22
'Spring Basic' Related Articles more