웹 기초 25강 - Ajax, MVC패턴

mvc : model2
1. 요청페이지(html, jsp) - front end -
2. controller - service - dao - mapper(SQL문 실행)
3. 결과를 다시 역순으로 전송
4. 수행결과를 view페이지로 forward

model -
VO, - view와 controller 사이에 교환되는 데이터
Service, - 일반 비즈니스 로직을 처리하거나 CRUD처리시 Dao와
controller 사이의 연결해주는 역할
crud작업일 때는 큰 역할이 없음
Dao - Data Access Object - table데이터에 접근객체
SqlMapClient객체가 필요
(좁은의미:VO만, 넓은의미: 세개 다)

view - jsp - 클라이언트(브라우저)에 보여지는 결과 페이지

controller - java문장을 이용하여 기술되는 비즈니스 로직
servlet - 웹을 통해서 실행되는 작은 자바 프로그램
jsp - html을 기반으로 하고 java언어를 기술 가능한 페이지

forward, redirect 검색해보기
forward :
redirect : 흐름을 바꿈 - 공유불가능

메소드

public 결과 리턴형 메소드이름(자료형변수)

members.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	$('#member').on('click', function(){
		$.ajax({
			url : '/jqpro/MemberServlet',
			type : 'get',
			success : function(res){ //res : servlet에서 수행된 결과를 받는 변수
				
				str = "<table border='1'>";
				str += "<tr><td>아이디</td>";
				str += "<td>이름</td>";
				str += "<td>주소</td>";
				str += "<td>전화번호</td>";
				
				$.each(res, function(i,v){
					str += "<tr><td>" + v.id + "</td>";
					str += "<td>" + v.name + "</td>";
					str += "<td>" + v.addr + "</td>";
					str += "<td>" + v.tel + "</td></tr>";
				})
				str += "</table>";
				
				$('#result1').html(str);
			},
			error : function(xhr){
				alert("상태 : " + xhr.status);
				//500, 404, 200
				//error인데 200일 때 - 데이터는 성공적으로 받아왔지만 Json형식이 틀렸을 때(parsing을 잘못했을 때)
				
			},
			dataType : 'json'
			
		})
	})
	
	$('#lprod').on('click', function(){
		$.ajax({
			url : '/jqpro/LprodServlet',
			type : 'get',
			success : function(arr){
				str = "<table border='1'>";
				str += "<tr><td>아이디</td>";
				str += "<td>상품분류</td>";
				str += "<td>상품명</td>";
			
			
			$.each(arr, function(i,v){
				str += "<tr><td>" + v.id + "</td>";
				str += "<td>" + v.gu + "</td>";
				str += "<td>" + v.name + "</td></tr>";
			})
			str += "</table>";	
			
			$('#result2').html(str);
			},
			
			error : function(xhr){
				alert("상태 : " + xhr.status);
				//500, 404, 200
				//error인데 200일 때 - 데이터는 성공적으로 받아왔지만 Json형식이 틀렸을 때(parsing을 잘못했을 때)
				
			},
			dataType : 'json'
				
		})
	})
	
})
</script>
</head>
<body>

<div class="box">
 <br>
 
 <br>
  <button id="member" type="button">MemberList</button>
  <div id="result1"></div>
 </div> 
 
 <div class="box">
 <br>
 
 <br>
  <button id="lprod" type="button">LprodList</button>
  <div id="result2"></div>
 </div> 
</body>
</html>

lprod.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script>

const xhr = new XMLHttpRequest();

$(function(){
	$('#lprod').on('click', function(){
		
		//요청
		xhr.open("get", "lprod.jsp", true);
		xhr.send();
		
		//응답
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
				arr = JSON.parse(this.responseText);
				
				str = "<table border='1'>";
				str += "<tr><td>아이디</td>";
				str += "<td>상품코드</td>";
				str += "<td>상품이름</td></tr>";
				
				$.each(arr,function(i){
					str += "<tr><td>" + arr[i].id + "</td>";
					str += "<td>" + arr[i].gu + "</td>";
					str += "<td>" + arr[i].name + "</td></tr>";
				})
				str += "</table>";
				
				$('#result1').html(str);
			}
		}
		
		
	})
	
})
</script>
</head>
<body>

<div class="box">
 <br>
 
 <br>
  <button id="lprod" type="button">LprodList</button>
  <div id="result1"></div>
 </div> 
</body>
</html>

members.jsp

<%@page import="kr.or.ddit.member.vo.MemberVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  //서블릿에서 저장된 결과데이터 가져오기
  List<MemberVO> list = (List<MemberVO>)request.getAttribute("asdf");
%>    
    
[
 <%
 	for(int i=0; i<list.size(); i++){
 		MemberVO vo = list.get(i);
 		if(i>0) out.print(",");
 %>
 {
 	"id" : "<%= vo.getMem_id() %>",
 	"name" : "<%= vo.getMem_name() %>",
 	"addr" : "<%= vo.getMem_addr() %>",
 	"tel" : "<%= vo.getMem_tel() %>"
 }
 
<% 
 	}
 %>
]

lprods.jsp

<%@page import="kr.or.ddit.lprod.vo.LprodVO"%>
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.ibatis.config.SqlMapClientFactory"%>
<%@page import="com.ibatis.sqlmap.client.SqlMapClient"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	//0. 클라이언트 요청시 전송되는 데이터를 받는다
	
	//1. SqlMapClient 객체를 얻는다
	//SqlMapClient smc = SqlMapClientFactory.getSqlMapClient();
	
	//2. mapper를 수행한다
	List<LprodVO> list = (List<LprodVO>)request.getAttribute("asdf");
	
	
	//3. select 수행한 결과를 가지고 jsonObject 배열로 응답데이터를 생성한다

%>
[
	<%
	for(int i=0; i<list.size(); i++){
		LprodVO vo = list.get(i);
		if(i>0) out.print(",");
	
	%>	
		{
			"id" : "<%= vo.getLprod_id() %>",
			"gu" : "<%= vo.getLprod_gu() %>",
			"name" : "<%= vo.getLprod_nm() %>"
		}
	
	
	<%
	}
	
	%>
	
]

MemberServlet

package kr.or.ddit.member.controller;

import java.io.IOException;
import java.util.List;

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;

import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.member.vo.MemberVO;

/**
 * Servlet implementation class MemberServlet
 */
@WebServlet("/MemberServlet") //url
public class MemberServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MemberServlet() {// 생성자
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//0. 클라이언트 요청시 전송되는 데이터를 받는다
		
		//1. service객체 얻는다
		IMemberService service = MemberServiceImpl.getMemberService();
		
		//2. service 메소드 호출 -- 결과 : List<MemberVO>
		List<MemberVO> list = service.selectAll();
		
		//3. 수행결과를  request에 저장:
		request.setAttribute("asdf", list); //임의의 이름으로 저장 - jsp에서 꺼낼때 일치해야 함
		//4. jsp:viewpage에 위임하여 출력한다 - jsonObject배열로 응답데이터를 생성한다
		//jsp로 forward
		RequestDispatcher disp =  request.getRequestDispatcher("1201/members.jsp"); //jsp파일 입력
		disp.forward(request, response);
		
	}

}

MemberDaoImpl

package kr.or.ddit.member.dao;

import java.sql.SQLException;
import java.util.List;

import com.ibatis.sqlmap.client.SqlMapClient;

import kr.or.ddit.ibatis.config.SqlMapClientFactory;
import kr.or.ddit.member.vo.MemberVO;

//Mapper 수행 - SqlMapClient객체가 필요
//자신의 객체를 생성하고 리턴하는 메서드
public class MemberDaoImpl implements IMemberDao {

	private SqlMapClient smc;
	private static MemberDaoImpl dao;
	
	private MemberDaoImpl(){
		smc = SqlMapClientFactory.getSqlMapClient();
		
	}
	
	public static IMemberDao getMemberDao(){
		if(dao==null) dao = new MemberDaoImpl();
		
		return dao;
	}
	
	@Override
	public List<MemberVO> selectAll() {
		List<MemberVO> list = null;
		
		try {
			list = smc.queryForList("mymember.getAllMember");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}

}

membertest.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE sqlMap
	PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
	"http://ibatis.apache.org/dtd/sql-map-2.dtd">
	
<!-- 이 문서는 ibatis에서 처리할 SQL문을 작성하는 문서입니다. -->
<sqlMap namespace="mymember">

	
	<select id="getAllMember" resultClass="memberVO">
		select * from mymember
	</select>
	

	
</sqlMap>

LprodServlet

package kr.or.ddit.lprod.controller;

import java.io.IOException;
import java.util.List;

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;

import kr.or.ddit.lprod.service.ILprodService;
import kr.or.ddit.lprod.service.LprodServiceImpl;
import kr.or.ddit.lprod.vo.LprodVO;

/**
 * Servlet implementation class LprodServlet
 */
@WebServlet("/LprodServlet")
public class LprodServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LprodServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//
		
		//1. service 객체 얻는다
		ILprodService service = LprodServiceImpl.getLprodService();
		
		//2. service 메소드 호출
		List<LprodVO> list = service.selectAll();
		
		//3. 수행결과를 request에 저장
		request.setAttribute("asdf", list);
		
		//4. jsp:viewpage에 위임하여 출력
		//jsp로 forward
		RequestDispatcher disp = request.getRequestDispatcher("1201/lprods.jsp");
		disp.forward(request, response);
	}

}

Author And Source

이 문제에 관하여(웹 기초 25강 - Ajax, MVC패턴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gksmf6699/웹-기초-25강-Ajax-MVC패턴

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)