AJAX STEP 1 - 기초

Server

AJAX STEP 1 - 기초

IT의 큰손 2023. 5. 12. 16:24

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

저작자표시 비영리 변경금지