[AJAX] #2 AJAX 기본 문법 뜯어보기

1. AJAX를 사용해보자

AJAX를 사용해보자!

AJAX Introduction

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

우선 스프링에서 AJAX를 활용하기 위해 필요한 jquery와 jquery.cookie js파일을 프로젝트에 추가해주었다.

AJAX를 사용하는 것은 자바스크립트의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈소스의 ajax()함수를 많이 이용하기에 jQuery를 추가해주어야 한다.

2. 스프링 환경설정하기

1) 의존성 추가

<!-- 사용자 지정 의존성 시작 -->
<!-- https://mvnrepository.com/artifact/org.apache.tomcat.embed/tomcat-embed-jasper -->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
    <version>9.0.58</version>
</dependency>

<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

<!-- JSON.simple 추가 -->
<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
    <groupId>com.googlecode.json-simple</groupId>
    <artifactId>json-simple</artifactId>
    <version>1.1.1</version>
</dependency>
<!-- 사용자 지정 의존성 끝 -->

2) application.properties 환경설정

server.port=9095

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

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

3) src/main/webapp/WEB-INF/views 폴더 생성하기

자동 생성을 해주는 버전도, 안해주는 버전도 있다.

지금은 안해주는 버전이어서(..) 직접 생성해주었다.

3. AJAX 사용해보기

이제 본격적으로 AJAX를 사용해보자.

1) ajax를 테스트 할 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>

</body>
</html>

위에서 저장해둔 js파일들도 임포트 해주었다.

2) 컨트롤러 만들어서 jsp페이지 불러오기

우선 컨트롤러부터 생성해준 뒤 이 컨트롤러를 활용하여 뷰단에 접근을 해보자(MVC 방식).

그리고 컨트롤러에서 위에서 만들었던 jsp 페이지를 불러왔다.

// 결과 확인 http://localhost:9095/ajaxtest01.do
@RequestMapping("ajaxtest01.do")
public String ajaxTest01() {
    return "ajax/ajaxTest01";
} // end

3) jQuery AJAX 관련 메소드 알아보기

jQuery AJAX Methods

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

- 전자정부 표준프레임워크에서 설명하는 AJAX를 jQuery에서 사용하는 법

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

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

www.egovframe.go.kr

위의 사이트들을 바탕으로 아래의 주요한 메소드들을 알아보려 한다.

- $.ajax()
- $.get()
- $.post()
- serialize()
응답받은 메세지를 처리하는 함수인 callback함수들이다.

이 메서드들은 ajaxTest02.jsp를 만들어서 사용해보려 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest02.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>	
	
	</script>
</body>
</html>

① $.ajax() 메서드 - ajaxTest02.jsp 페이지 활용

위의 페이지를 보면, 서버에서 응답받기라는 버튼을 누를 때마다 panel이라는 div에 내용들이 추가되게 하려고 한다.

그 기능을 위해 <script> 태그 안에서 $.ajax() 메서드를 사용해보자.

- 문법

// 1) $.ajax() 함수
//	- 형식
$.ajax({name:value, name:value, "name",value})
//	-> value의 값은 자료형 표현 방식에 맞춰서 작성

- 구현 1) : id가 "btn"인 버튼이 클릭되었을 때 $.ajax() 메서드 사용

$("#btn").click(function() {
    $.ajax({
             url 		: "message.do"	// 요청 명령어
            ,type		: "get"			// get 방식
            ,dataType	: "text"		// 응답 메세지의 타입, 기본값은 text
            ,error		: function(error){
                            alert("에러 : " + error);
                            }	// error callback 함수 
            ,success 	: function(result){ // result는 서버가 응답해준 메세지
                            alert("성공 : " + result);
                            }	// success callback 함수
    }); // ajax() end
}); // click() end

- 구현 2) : ajaxtest02.do와 message.do 명령어 구현

// 결과 확인 http://localhost:9095/ajaxtest02.do
@RequestMapping("ajaxtest02.do")
public String ajaxTest02() {
    return "ajax/ajaxTest02";
} // end

@RequestMapping(value = "message.do", method = RequestMethod.GET )
public void message(HttpServletRequest req, 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);
    }
} // message() end

버튼을 누르니 서버에서 응답이 성공했고, 성공했을 때 등록해두었던 메세지들이 출력된다

- 구현 3) : 댓글처럼 div 구역 안에 출력시키기

,success 	: function(result){ // result는 서버가 응답해준 메세지
                // alert("성공 : " + result);
                // 1. 결과물이 쌓아지면서 출력
                //$("#panel").append(result);

                // 2. 결과물을 없애가며 새롭게 출력
                $("#panel").empty();
                $("#panel").text(result);	// 단순 문자열로
                //$("#panel").html(result);	// html 구조로
            }	// success callback 함수

- 구현 4) : 어노테이션으로 구현하기

아니 근데!!! 컨트롤러에서 저렇게 표현하는 것이 너무 복잡하고 불편하다.

그래서 스프링 프레임워크에서는 어노테이션으로 이런 기능들을 구현해준다.

이 때 사용되는 어노테이션이 바로 @ResponseBody(@RequestMapping 어노테이션과 배치 순서는 상관없다).

이렇게 어노테이션을 활용하면 jsp view를 이용하여 출력하지 않고 response값 그대로 브라우저에 전송하여 객체에 직접 출력하게 된다.

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

출력 결과는 같으며 메세지가 쌓여가도록 출력시켰다.

② $.get() 메서드 - ajaxTest02.jsp 페이지 활용

이번엔 $.ajax() 보다 좀 더 직접적으로 접근을 요청하는 $.get() 메서드에 대해서 알아보자.

이 메서드를 사용하면 보다 간단하게 코드를 작성할 수 있다.

- 문법

// 2) $.get() 방식
//	AJAX를 GET 방식으로 요청하는 방식
$.get("요청 명령어", callback 함수)

- 구현

callback 함수인 responseProc 함수를 따로 구현했다.

$("#btn").click(function(){
    $.get("message.do", responseProc);
}); // click() end

function responseProc(result){
    $("#panel").empty();
    $("#panel").text(result);
} // responseProc() end

결과는 동일하다.

저작자표시 비영리 동일조건

'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글

[AJAX] #5 - 검색 기능 구현하기 (0)	2022.11.10
[AJAX] #4 - AJAX로 사진 띄우기 (0)	2022.11.09
[AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용) (0)	2022.11.09
[AJAX] #1 AJAX의 이해 (0)	2022.11.09

'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글

티스토리툴바