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 관련 메소드
- 참조 https://www.w3schools.com/jquery/jquery_ref_ajax.asp
- $.ajax()
- $.get()
- $.post()
- serialize()
- 응답받은 메세지를 처리하는 함수를 callback함수라 한다
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에 출력해보기
위 과정을 @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
'웹개발 교육 > Spring' 카테고리의 다른 글
| [73일] Spring (16) - Ajax 이미지 출력 (0) | 2022.11.09 |
|---|---|
| [73일] Spring (15) - Ajax 아이디 중복 확인(cookie) (0) | 2022.11.09 |
| [71일] spring (13) - mymelon 호스팅 (0) | 2022.11.07 |
| [70일] spring (12) - mymelon media 수정 (0) | 2022.11.04 |
| [70일] spring (11) - mymelon media 삭제 (0) | 2022.11.04 |
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 관련 메소드
- 참조 https://www.w3schools.com/jquery/jquery_ref_ajax.asp
- $.ajax()
- $.get()
- $.post()
- serialize()
- 응답받은 메세지를 처리하는 함수를 callback함수라 한다
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 = trueWEB-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 endpackage 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에 출력해보기
위 과정을 @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
'웹개발 교육 > Spring' 카테고리의 다른 글
| [73일] Spring (16) - Ajax 이미지 출력 (0) | 2022.11.09 |
|---|---|
| [73일] Spring (15) - Ajax 아이디 중복 확인(cookie) (0) | 2022.11.09 |
| [71일] spring (13) - mymelon 호스팅 (0) | 2022.11.07 |
| [70일] spring (12) - mymelon media 수정 (0) | 2022.11.04 |
| [70일] spring (11) - mymelon media 삭제 (0) | 2022.11.04 |
