728x90
★ AJAX, Asynchronous JavaScript and XML
- 비동기 자바스크립트 & XML
- 비동기 자바스크립트 통신
- 자바스크립트 <- (통신) -> 웹서버(톰캣)
- 순수 자바스크립트 버전
- jQuery 버전
- ES6 자바스크립트 버전
★ 예제 1 - 데이터베이스 데이터 count 출력
■ 파일 생성
- 프로젝트 생성
name : "AjaxTest"
context :- 패키지 생성
com.test.ajax
WEB-INF/views
lib -> jar파일- 파일 생성
ex01.java
AjaxDAO.java
MemoDTO.java
ex01.jsp
■ ex01.java
package com.test.ajax;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex01.do")
public class ex01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//ex01.java
String count = req.getParameter("count");
req.setAttribute("count", count);
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex01.jsp");
dispatcher.forward(req, resp);
}
}
■ AjaxDAO.java
package com.test.ajax;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import com.test.my.DBUtil;
public class AjaxDAO {
private Connection conn;
private Statement stat;
private PreparedStatement pstat;
private ResultSet rs;
public AjaxDAO() {
this.conn = DBUtil.open();
}
public int count() {
try {
String sql = "select count(*) as cnt from tblMemo";
stat = conn.createStatement();
rs = stat.executeQuery(sql);
if(rs.next()) {
return rs.getInt("cnt");
}
} catch (Exception e) {
e.printStackTrace();
}
return 0;
}
}
■ MemoDTO.java
package com.test.ajax;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
//코드 자동생성 + 코드 축소
/*@Setter
@Getter
@ToString*/
@Data //@ToString + @Getter + @Setter + @EqualsAndHashCode + @RequiredArgsConstructor
public class MemoDTO {
private String seq;
private String memo;
private String regdate;
private String cseq;
private String icon;
private String color;
}
■ ex01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>
</style>
</head>
<body>
<h1>Ajax</h1>
<div>
<input type="button" value="확인" id="btn1">
<hr>
<div id="div1">${count}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
//사용자 행동 > DB 조작
//버튼 클릭 > DB의 메모 개수를 가져와서 > 화면 출력
$('#btn1').click(()=>) {
//DB 조작을 하는 서블릿 호출하기
location.href = '/ajax/ex01ok.do';
});
</script>
</body>
</html>
★ 두번째 예제 : 질문 게시판 만들기
- 필요 파일들
- Ex02.java
- ex02.jsp
- ResearchDTO.java
■ Ex02.java
package com.test.ajax;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex02.do")
public class Ex02 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Ex02.java
//1. DB 작업 > select
//2. 결과 반환 > JSP 호출하기
AjaxDAO dao = new AjaxDAO();
ResearchDTO dto = dao.getResearch(1);
req.setAttribute("dto", dto);
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex02.jsp");
dispatcher.forward(req, resp);
}
}
■ ResearchDTO.java
package com.test.ajax;
import lombok.Data;
@Data
public class ResearchDTO {
private String seq;
private String question;
private String[] item;
private String[] cnt;
}■ ex02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>
#chart {
}
#chart > div {
border : 1px solid #999;
font-size : 12px;
padding : 4px;
text-align : right;
margin-bottom : 5px;
}
#chart > div:nth-child(1) {
background-color : tomato;
color : white;
}
#chart > div:nth-child(2) {
background-color : gold;
color : white;
}
#chart > div:nth-child(3) {
background-color : cornflowerblue;
color : white;
}
#chart > div:nth-child(4) {
background-color : orange;
color : white;
}
</style>
</head>
<body>
<h1>설문 조사</h1>
<div>주제 : <span>${dto.question}</span></div>
<div id="chart">
<c:forEach var="i" begin="0" end="3">
<div style="width : ${dto.cnt[i] * 40}px;">${dto.item[i]}(${dto.cnt[i]})</div>
</c:forEach>
<%--
<div>${dto.item[1]}(${dto.cnt[1]})</div>
<div>${dto.item[2]}(${dto.cnt[2]})</div>
<div>${dto.item[3]}(${dto.cnt[3]})</div>
--%>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
</script>
</body>
</html>
■ 실행결과
728x90
'Server' 카테고리의 다른 글
| AJAX STEP 2 - Push Server (0) | 2023.05.15 |
|---|---|
| Servlet + JSP STEP 4 - Memo (0) | 2023.05.15 |
| Servlet + JSP STEP 3 - 이미지 뷰어(갤러리) (0) | 2023.05.12 |
| Servlet + JSP STEP 2 - FileProject (0) | 2023.05.12 |
| Servlet+JSP STEP 1 - File UPLOAD (0) | 2023.05.11 |
