오늘의 코딩순서
(폴더: och15_ajax_ch02)
- max.html + temperate.jsp
(폴더: och15_ajax_ch03)
- ajaxMenu.html + menu.jsp
- ajaxConfirmId.html + MemberDao.class + confirmId.jsp ⭐⭐⭐(ajax의 핵심, ajax 공부하려면 이걸로!)
- ajaxSetup.html + checkIn.jsp
- uiDisign.html
- uiRun.jsp + jsRunTestResult.jsp + jsRunTestResult3 (현장 HW)
(폴더: och12) >>> MVC 1 model 간이 프로젝트⭐⭐⭐
- error.jsp + Member.class (현장 HW) + loginForm.jsp
- loginPro.jsp + MemberDao.class (HW)
오늘의 코딩 포인트
(폴더: och15_ajax_ch02)
- max.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery.js"></script> <!-- 대소문자 주의! -->
<script type="text/javascript">
$(function() {
$('#menu1').click(function() { //'menu1 버튼을 클릭하게 되면' 이라는 뜻
$.ajax ({
url : 'menu.jsp' , //여기부터 두 줄은 서버에 대한 것
// data :
dataType : 'html' , //여기부터 두 줄은 callback 함수
success : function(data) { //윗 줄의 html이 data로 들어감
$('#msg1').html(data) //callback 함수가 성공했을때 작동할 로직
}
}
);
});
});
$('#menu2').click(function() {
$.ajax ({
url : 'menu.jsp' ,
dataType : 'html' ,
success : function(data) {
$('#msg2').html($(data).find('li'));
}
});
});
</script>
<body>
<div><a id="menu1" >메뉴선택1</a><p>
<span id="msg1"></span>
</div><p><p><p><p><p><p>
<div><a id="menu2" >메뉴선택2</a><p>
<span id="msg2"></span>
</div>
</body>
</html>- temperate
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 자바 프로그램으로도 할 수 있으나, 스크립틀릿으로 하는 방법 코딩 -->
<%
double[] temp = {9.8, 30.2, 24.7, 23.7, 23.1};
for (int i = 0; i < temp.length; i++) {
//out.print(temp[i]);
out.println(temp[i]);
if (i != (temp.length -1)) {
out.print(",");
//문장이 끝난 것이 아니면 ,를 집어넣으라는 뜻
//for문 밑에 out.print(",")을 넣으면 문장이 끝나도 ,가 들어가버림
//따라서 로직을 하나 더 추가한다
}
}
%>
(폴더: och15_ajax_ch03)
- ajaxMenu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery.js"></script> <!-- 대소문자 주의! -->
<!-- js폴더의 jquery.js파일이 여기에 들어감 -->
<script type="text/javascript">
$(function() {
$('#menu1').click(function() { //'menu1 버튼을 클릭하게 되면' 이라는 뜻
$.ajax ({
url : 'menu.jsp' , //여기부터 두 줄은 서버에 대한 것
// data : // 파라미터와 같은 기능
dataType : 'html' , //여기부터 두 줄은 callback 함수의 return 받을 값에 대한 요소
success : function(data) { //윗 줄의 html(menu.jsp의 data)이 통째째 들어감
$('#msg1').html(data) //callback 함수가 성공했을때 작동할 로직
}
}
);
});
$('#menu2').click(function() {
$.ajax ({
url : 'menu.jsp' ,
dataType : 'html' ,
success : function(data) {
$('#msg2').html($(data).find('li'));
}
});
});
});
</script>
<body>
<div><a id="menu1" >메뉴선택1</a><p>
<span id="msg1"></span>
</div><p><p><p><p><p><p>
<div><a id="menu2" >메뉴선택2</a><p>
<span id="msg2"></span>
</div>
</body>
</html>- menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h2> 중 식 메 뉴</h2>
<ul>
<li> 짜장면 </li>
<li> 짬 뽕 </li>
<li> 기스면 </li>
<li> 탕수육 </li>
</ul>
<p> 메뉴를 골라주세요</p>
- ajaxConfirmId.html >>oracle의 member1 TBL 활용
Tip)- sendData: 물음표와 같은 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery.js"></script> <!-- 대소문자 주의! -->
<script type="text/javascript">
$(function() {
$('#chk').click(function(){ //클릭 이벤트 발생
var id = $('#id').val(); //#id: 밑의 id="id"를 뜻함 //var: 객체가 아닌 변수의 속성을 가져오는 것
var sendData = 'id='+id
alert('sendData->'+sendData);
$.ajax({
url : 'confirmId.jsp' ,
data : sendData , //파라미터가 여기로 들어감
dataType : 'text' , //위에서 나온 데이터를 text로 넣기
success : function(data1) {
$('#msg').html(data1); //아래의 id=msg 중복체크 부분에 들어감
}
});
});
});
</script>
<body>
<h1>Model1 회원가입 </h1>
<form action="confirmId.jsp">
아이디 : <input type="text" name="id" id="id">
<input type="button" value="중복체크" id="chk">
<span id="msg" ></span><p> <!-- 중복된 아이디 체크 확인 로직 -->
암호 : <input type="password" name="pass" id="pass"><p>
이름 : <input type="text" name="name" id="name"><p>
<input type="submit" value="확인">
</form>
</body>
</html>- ⭐⭐MemberDao.class (현장HW) ==> 0719일지의 memberDao.class 참고하기
Tip)- DBCP: 커넥션 풀, 데이터베이스 연결을 효율적으로 관리하기 위한 기술 (자세한 정의는 0718일지 참고)
- DBCP와 Singleton의 비교
- 왜 같이 사용하는가?: DBCP의 이점과 Singleton 패턴의 이점을 결합하여 데이터베이스 연결을 더욱 효율적으로 관리하고 애플리케이션의 일관성을 유지하기 위해서
- 둘을 결합하면 어떤 이점이 있는가?
- ⭐singleton 패턴 (==> 더 자세한 것은 0529일지의 design pattern의 Singleton 참고)
- 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나만 생성되도록 보장하는 클래스
최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 return함 - 객체의 인스턴스가 오직 1개만 생성되는 패턴을 의미, 2개 이상을 생성할 때는 사용하지 않음
- 특정 클래스의 instance를 하나만 생성하도록 보장하는 패턴
즉, 내부에 유일한 instance를 가지며, 이 instance를 외부에서 접근할 수 있도록 메소드를 제공함 - 전체 프로그램에서 단 하나의 객체만 만들도록 보장해야 하는 경우, 다시 말해 공통된 객체를 여러개 생성해서 사용하는 DBCP와 같은 상황에서 많이 사용됨
- 싱글톤을 만들려면 클래스 외부에서 new 연산자로 생성자를 호출할 수 없도록 막아야함
- ⭐⭐외부에서 생성자 호출을 막기 위해 private(public(X))를 붙여주어 외부에서 새로운 객체를 생성할 수 없도록 막아줘야 함
- 장점
- 메모리 측면의 이점: Singleton 패턴을 사용하게 되면 한 개의 instance만을 고정 메모리 영역에 생성하고 추후 해당 객체를 접근할 때 메모리 낭비를 방지할 수 있음
- 속도 측면의 이점: 생성된 인스턴스를 사용할 때는 이미 생성된 인스턴스를 활용하여 속도가 빨라짐
- 쉬운 데이터 공유의 이점: 전역으로 사용하는 instance이기 때문에 다른 여러 클래스에서 데이터를 공유하며 사용할 수 있음. 다만 동시성 문제가 발생할 수 있어 유의하여 설계해야 함
- 단점
- 전역 인스턴스이기 때문에 static 변수에 instance가 생성되는 경우 데이터가 공유될 우려가 있음
- 멀티 쓰레드 환경에서 동기화 처리를 하지 않으면 인스턴스가 두 개 이상 생성되어 일관되지 않은 값들이 생기는 경우가 발생할 수 있음
↳ 멀티 쓰레드?: Multi-thread
- 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나만 생성되도록 보장하는 클래스
- instance 객체
- Singleton 클래스에서 생성되는 유일한 객체, 외부에서는 이 instance에 접근하여 필요한 작업을 수행함
- 만약 'instance'가 아직 생성되지 않았다면, 새로운 'Singleton' 객체를 생성하여 반환함
이렇게 하면 프로그램 전체에서 오직 하나의 'Singleton' 객체만 사용됨
- getInstance() 메서드
- Singleton 클래스의 유일한 instance를 반환하는 메서드
이 메소드는 클래스의 유일한 인스턴스를 반환하기 때문에, 이 메소드를 통해 어디서든 동일한 객체에 접근할 수 있음 - getInstance()는 내부적으로 생성되지 않았으면 생성함
- 기존에 생성된 값이 존재하면 생성된 인스턴스를 리턴하는 형태로 반환함, 따라서 여러 변수들은 싱글톤에서 동일한 객체를 참조하게 됨
- Singleton 클래스의 유일한 instance를 반환하는 메서드
package och15_ajax;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
public class MemberDao {
private static MemberDao instance; //Singleton ==> Resource 절감
private MemberDao() { //Default
}
//현장 HW 1
public static MemberDao getInstance() {
if (instance == null) {
instance = new MemberDao();
}
return instance;
}
//DBCP
private Connection getConnection() throws SQLException {
Connection conn= null;
try {
Context ctx = new InitialContext();
DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
} catch (NamingException e) {
e.printStackTrace();
}
return conn;
}
public int confirm(String id) throws SQLException {
int result = 1;
//현장 HW 2
// member1 Read
// id 존재 --> return 1
// id 존재X --> return 0
System.out.println("confirm1 id->"+id); //오류확인용
Connection conn =null;
String sql = "select id from member1 where id=?";
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if (rs.next()) {
result = 1;
}
else
result = 0;
System.out.println("confirm2 result->"+result); //오류확인용
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
return result;
}
}- confirmId.jsp (현장 HW)
<%@page import="och15_ajax.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String id = request.getParameter("id");
System.out.println("jsp1 id->"+id); //오류확인용
MemberDao memberDao = MemberDao.getInstance();
//현장 HW
// member1 Read
// id 존재 --> return 1
// id 존재X --> return 0
int result = memberDao.confirm(id);
System.out.println("jsp result->"+result); //오류확인용
if (result == 0) {
out.println("사용할 수 있는 ID입니다");
} else {
out.println("중복된 아이디입니다");
}
%>
</body>
</html>
- ajaxSetup.html
Tip- ⭐serialize
- 현장에서 많이 쓰는 방법
- click 함수
- function() : 익명함수
- ⭐serialize
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#sub').click(function(){ //click: jquery의 자체적인 함수
var name = $('#name').val();
var pass = $('#pass').val();
var sendData = 'name=' + name +'&pass=' + pass;
alert('sendData->'+sendData);
$.ajaxSetup({
type : 'GET' ,
url : 'checkIn.jsp' ,
dataType : 'text' ,
success : function(data1) {
$('#msg').html(data1);
}
});
/* 첫번째 방법: 파라미터의 개수가 적을 때 사용함
var name = $('#name').val();
var pass = $('#pass').val();
var sendData = 'name=' + name + '&pass=' + pass; */
//두번째 방법: 현장에서 많이 쓰는 방법, 여러 개의 파라미터가 있을때 사용함
var sendData = $('form').serialize();
alert('sendData->'+sendData);
$.ajax({
data : sendData
});
});
});
</script>
</head>
<body>
<form>
이름 : <input type="text" name="name" id="name"> <p>
암호 : <input type="password" name="pass" id="pass"> <p>
<input type="button" id="sub" value="확인">
</form>
<div id="msg"></div>
</body>
</html>+++ ajaxSetup.html 두 번째 버전 (==> 결과는 같지만, 더 간단한 버전)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#sub').click(function(){
var name = $('#name').val();
var pass = $('#pass').val();
var sendData = 'name=' + name +'&pass=' + pass;
alert('sendData->'+sendData);
$.ajaxSetup({
type : 'GET' ,
url : 'checkIn.jsp' ,
dataType : 'text' ,
success : function(data1) {
$('#msg').html(data1);
}
});
/* 첫번째 방법
var name = $('#name').val();
var pass = $('#pass').val();
var sendData = 'name=' + name + '&pass=' + pass; */
//두번째 방법
var sendData = $('form').serialize();
alert('sendData->'+sendData);
$.ajax({
data : sendData
});
});
});
</script>
</head>
<body>
<form>
이름 : <input type="text" name="name" id="name"> <p>
암호 : <input type="password" name="pass" id="pass"> <p>
<input type="button" id="sub" value="확인">
</form>
<div id="msg"></div>
</body>
</html>- checkIn.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>
</head>
<body>
당신의 이름은 ${param.name }이군요 방가?<p>
<c:choose>
<c:when test="${param.name == 'admin' && param.pass == '1234'}">
당신은 모든 권한이 있습니다
</c:when>
<c:otherwise>
당신은 권한이 없습니다
</c:otherwise>
</c:choose>
</body>
</html>
- uiDesign.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function chk(n) {/* 하나가 아닌 두 개이기 때문에 chk(n) */
if (!document.forms[n].name.value) {
if ( n == 0) {
alert("취미 이름을 등록하세요");
} else if ( n == 1 ) {
alert("색상 이름을 등록하세요");
}
document.forms[n].name.focus();
return false;
}
}
</script>
<body>
<h2>취미</h2>
<form action="test1.jsp" name="frm1" onsubmit="return chk(0)">
이름1 : <input type="text" name="name"><p>
취미 : <select name="hobby">
<option value="달리기">달리기</option>
<option value="독서">독서</option>
<option value="수영">수영</option>
</select><p>
<input type="submit" value="확인">
</form>
<h2>색상</h2>
<form action="test2.jsp" onsubmit="return chk(1)">
이름2 : <input type="text" name="name"><p>
색상 : <select name="color">
<option value="빨강">빨강</option>
<option value="노랑">노랑</option>
<option value="초록">초록</option>
</select><p>
<input type="submit" value="확인">
</form>
</body>
</html>
- uiRun.jsp
Tip)- ⭐location.href: 페이지 이동하는 JSP 명령어, 현장에서 많이 쓰임, 효율적임
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.button { color:red;
font-size:20px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#chk').click(function(){
var sendData = $('form').serialize();
alert('sendData-->'+sendData)
location.href="jsRunTestResult.jsp?"+sendData;
//location.href: 페이지 이동하는 JSP 명령어, 현장에서 많이 쓰임, 효율적임
});
//현장 HW
//ID만 가져와서 jsRunTestResult3로 이동하여 실행시키는 로직 만들기
$('#chk3').click(function() {
var id = $('#id').val();
var sendData = 'id='+id;
alert('sendData-->'+sendData)
location.href="jsRunTestResult3.jsp?"+sendData;
});
});
</script>
</head>
<body>
<h1>회원가입</h1>
<form action="">
아이디 : <input type="text" name="id" id="id" value=""><p>
암호 : <input type="password" name="pass" id="pass"><p>
이름 : <input type="text" name="name" id="name"><p>
<input type="button" class="button" value="확인1" id="chk">
<input type="button" class="button" value="확인2" id="chk3">
</form>
</body>
</html>- jsRunTestResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>jsRunTestRusult 결과</h2>
아이디 : ${param.id }<p>
이 름 : ${param.name }<p>
</body>
</html>
- jsRunTestResult3.jsp (현장 HW)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.button { color:red;
font-size:20px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#chk').click(function(){
var sendData = $('form').serialize();
alert('sendData-->'+sendData)
location.href="jsRunTestResult.jsp?"+sendData;
});
//현장 HW
//ID만 가져와서 jsRunTestResult3로 이동하여 실행시키는 로직 만들기
$('#chk3').click(function() {
var id = $('#id').val();
var sendData = 'id='+id;
alert('sendData-->'+sendData)
location.href="jsRunTestResult3.jsp?"+sendData;
});
});
</script>
</head>
<body>
<h1>회원가입</h1>
<form action="">
아이디 : <input type="text" name="id" id="id" value=""><p>
암호 : <input type="password" name="pass" id="pass"><p>
이름 : <input type="text" name="name" id="name"><p>
<input type="button" class="button" value="확인1" id="chk">
<input type="button" class="button" value="확인2" id="chk3">
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>jsRunTestResult3 결과</h2>
아이디 : ${param.id }<p>
</body>
</html>
(폴더: och12) >>간이 프로젝트 하는 셈⭐⭐⭐
- error.jsp >> 에러처리 페이지 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isErrorPage="true"%>
<% response.setStatus(200); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>공지사항</h2>
공사중입니다. <p>
<%=exception.getMessage() %>
<!-- e.getMessage와 같은 기능 ,
위의 isErrorPage에서 true를 선언해야 exception을 쓸 수 있다-->
</body>
</html>Oracle sql에 추가하기
- Member.class >> DTO역할, member2 TBL의 컬럼 정의
package och12;
import java.util.Date;
public class Member {
//현장 HW
private String id;
private String passwd;
private String name;
private String address;
private String tel; //숫자 사이에 '-'를 넣기 때문에 int가 아닌 String로 선언
private Date reg_date;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPasswd() {
return passwd;
}
public void setPasswd(String passwd) {
this.passwd = passwd;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public Date getReg_date() {
return reg_date;
}
public void setReg_date(Date reg_date) {
this.reg_date = reg_date;
}
}- loginForm.jsp >> 사용자가 보는 로그인 폼 화면 만들기
Tip)
- required: 꼭 입력해야 하는 창을 가리키는 값
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
background-color: pink;
}
tr {
font-size: 24;
}
</style>
</head>
<body>
<h2>로그인</h2>
<form action="loginPro.jsp" method="post">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="id" required="required"></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" required="required"></td>
</tr>
<tr>
<td><input type="submit" value="확인"></td>
<td><input type="reset" value="취소"></td>
</table>
</form>
</body>
</html>
- MemberDao.class (현장 HW1 + HW) >> DAO역할
Tip) 여기도 Singleton과 DBCP 같이 사용
package och12;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
//singleton + DBCP
public class MemberDao {
private static MemberDao instance;
private MemberDao() {
}
public static MemberDao getInstance() {
//instance를 만들기 전에 선언되어야 하기 때문에 public와 static로 짜야함
//(0722) 현장 HW1
if (instance == null) {
instance = new MemberDao();
}
return instance;
}
//DBCP
private Connection getConnection() {
Connection conn = null;
try {
Context ctx = new InitialContext();
DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/OracleDB");
conn = ds.getConnection();
} catch (Exception e) {
//e.printStackTrace();
System.out.println(e.getMessage());
}
return conn;
}- loginPro.jsp (HW) >> 로그인 폼의 프로세스, 사용자 정보 분별 로직
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String id =request.getParameter("id");
String passwd =request.getParameter("passwd");
MemberDao md = MemberDao.getInstance();
int result = md.check(id, passwd);
//존재하는 User ==> PreparedStatement 사용
if (result == 1) {
session.setAttribute("id", id);
System.out.println("login Success...");
response.sendRedirect("main.jsp");
} else if (result == 0) { //password 입력 안할 때 나타나는 화면
%>
<script type="text/javascript">
alert("비밀번호가 틀렸습니다");
history.go(-1);
</script>
<% } else { %>
<script type="text/javascript">
alert("User 미존재(-1) 넌 누구냐 수상한데 !");
history.go(-1);
</script>
<%
}
%>
</body>
</html>
질문목록
1. 0719_och11의 memberDao와 0722_och14의 memberDao의 차이는 무엇인가?
↳ Singleton을 사용하느냐, 하지 않느냐의 차이이다
Singleton을 사용하면 데이터베이스 연결 객체와 같은 리소스를 효율적으로 관리할 수 있으며 메모리가 최적화된다. 앞서 Singleton 없이 DBCP만 활용한 memberDao를 보여준것은, Singleton 없이 DBCP만 사용하는 회사도 있기 때문에 다양한 케이스를 보여주기 위함이었다
2. memberDao.class의 public과 private를 나눠서 사용한 이유가 무엇인가?
수업교재
19. Ajax
1. 정의
- Asynchronous JavaScript + XML
- JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술
- 요즘은 XML보다 JSON을 더 많이 이용함
2. 장점
- 가장 큰 장점은 웹서버와 데이터를 주고 받아 사용자가 웹페이지 이동 없이 즉각적으로 원하는 기능을 수행할 수 있도록하는 것
- 페이지 이동 없이 고속으로 화면 전환
- 서버처리를 기다리지 않고 비동기 요청이 가능
- 서버측 처리를 각 PC에 분산 가능
- 수신하는 데이터의 양을 줄임
- 요즘은 아래의 단점들이 많이 보완이 됨
3. 단점
- 크로스 브라우저화의 노하우 필요
- AJAX를 사용하지 못하는 브라우저
- 오픈소스이므로 차별화가 어려움
- 보안에 더욱 신경을 써야함
4. 기존방식과 AJAX의 차이: 웹 브라우저가 웹 서버와 통신을 하고 요청결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생함
5. AJAX의 주요 구성요소
- XMLHttprequest : 웹서버와 통신을 담당함. 사용자의 요청을 웹서버에 전송 및 웹 서버로부터 받은 결과를 웹 브라우저에 전달함
- DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작할 때 사용함
- CSS : 글자색, 배경색, 위치, 투명도 등 UI관련 부분을담당
- 자바스크립트: 사용자가 마우스를 드래그 하거나 버튼을 클릭하면 XMLHttpRequest 객체를 사용해 웹 서버에 요청을전송함. XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해 화면을 조작함
6. 사용방법 및 직접 제어 메서드
- jQuery에서는 $.ajax()라는 유틸리티 함수로 Ajax 요청을 설정 제어함
- 요청의 생성방법과 통보받을 콜백을 제어하고자 전달된options을 사용하여 Ajax 요청을 전송한다
반환값은 XHR 인스턴스이다
7. AJAX의 활용
- Ajax의 활용 방향: 페이지의 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상시킬 수 있다. 이는 페이지의 일부만 수정하게 되면 사용자가 전체 페이지가 로드될 때까지 기다릴 필요가 없기 때문
- Ajax 활용 예시
- ⭐라이브검색: 라이브검색(혹은자동완성)이라고 불리는 기능은 주로 Ajax를 이용한다.
오늘날 검색 사이트의 대부분이 사용하는 기술이다. 이 방법은 검색 막대나 홈페이지에서 검색어를 입력하는 동시에 검색결과가 나타나도록 한다. - 사용자 정보 표시: 사용자가 생성한 콘텐츠를 사용하는 웹 사이트(예를 들면, 트위터나 플리커 등)는 독자들의 웹사이트에 본인의 정보(최근 트윗이나 사진 등)를 노출하는 기능을제공하는데, 이를 위해 자신들의 서버에 데이터를 수집한다.
이 밖에도 회원가입시 중복 아이디일 경우, "이미 사용중인 아이디입니다."를 표시하게 하는 기능에서도 활용 되고 있으며, 온라인 쇼핑몰에서 장바구니에 원하는 물품을 추가했을때 페이지 이동이나 전체 페이지에 대한 새로고침 없이도 물품정보만 추가되는 기능을 구현하고자할때, Ajax를 활용한다
- ⭐라이브검색: 라이브검색(혹은자동완성)이라고 불리는 기능은 주로 Ajax를 이용한다.
- Ajax 활용 분야
- 기존 웹사이트에서 AJAX를 활용하면 효과가 있는 경우
- 웹 페이지를 바꾸지 않고 현재의 웹페이지에서 어떤 동작을 하고 싶을 때
- 불필요한 팝업을 사용하여 처리하는 작업들을 할 때
- AJAX 애플리케이션으로 개발할 필요가 있는 경우
- 여러번 불필요하게 화면을 다시 출력할때
- 특정한 데이터를 반복해서 사용하면서 다양한 작업을 할 때
- 기존 웹사이트에서 AJAX를 활용하면 효과가 있는 경우
7. XMLHttpRequest(XHR)
- 주요 속성
- readyState
- Ajax 개체의 상태를 나타내는 숫자
- 처음 Ajax 개체를 생성하면 그 값은 0이다.
get() 메소드로 요청할 페이지 정보를 설정하면 1이 되고, send() 메소드로 요청을 보내면 2가 되고, 서버에서 응답이 오기 시작하면 3이 되고, 서버 응답이 완료되면 4가 된다 - 읽기 전용이며 쓰기는 할 수 없다
- status (0711 일지부터 참고)
- 서버로부터 받은 응답의 상태를 나타내는 숫자
- 정상적으로 응답을 받은 경우 200이고, 페이지를 찾지 못한 경우 404가 된다
- readyState
- 프로그래밍 순서
- 사용자의 이벤트가 발생하면 이벤트 처리 함수를 호출함
- XMLHttpRequest 객체의 send() 함수를 호출함
- send 함수가 호출되면 웹 서버에 요청 전송하기
- open() 함수 : 요청의 초기화, GET/POST선택, 접속할 URL 입력
- HttpMethod: get 또는 post
- httpUrl : 접속할 URL 웹페이지의 보안상 이유로 접속할 url은 현재 페이지와 같은 도메인에 있어야함
- send() 함수 : 홈 서버에 요청전송
- open() 함수 : 요청의 초기화, GET/POST선택, 접속할 URL 입력
- X MLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티에 지정한 callback 함수 호출함
- onreadystatechange
- readyState 프로퍼티의 값
보통readyState 값이 4인 경우에 기능을 구현함
처리시간이 오래 걸릴 경우1, 2, 3일때 작업이 진행중이라는 메시지를 출력하는 것이 좋음 - 웹 서버로부터 응답이 도착하면 특정한 자바 스크립트 함수를 호출하는 기능을 가진 프로퍼티
- onreadystatechange 에서 명시한 callback 함수는 readyState라는 프로퍼티의 값이 변경될 때마다 호출됨
- readyState 프로퍼티의 값
- callbackFunction(): 실행된 코드에게서 응답을 이끌어내는 함수
- onreadystatechange(): 여기에 지정한 함수를 callback 함수라고 부르며 callback 함수에서 화면을 변경하거나 경고창을 띄우는 등 응답결과에 따라 수행함
- onreadystatechange
- 사용결과 화면의 내용이 변경되거나 새로운 내용 추가 (0620일지 참고)
- HTML 요소의 innerHTML속성에 HTML 코드 지정하기
- DOM(Document Object Model) API 사용하기
- innerHTML 속성을 사용하는 기본코드: 특정한HTML 태그 안에 들어갈 HTML 코드를 포함
오늘의 숙제
- MemberDao.class >> DAO역할, DB Connection 후 후 체크(check 메서드)
//(0722)HW로 추가 ==>loginPro.jsp와 연결됨
public int check(String id, String passwd) throws SQLException {
int result = 0;
Connection conn = null;
String sql = "select passwd from member2 where id=?";
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
//ID 승인
if (rs.next()) {
String dbPasswd = rs.getString(1);
if (dbPasswd.equals(passwd))
result = 1;
else
result = 0;
} else
result = -1;
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}
return result;
}
}'JSP > Java Script' 카테고리의 다른 글
| 2024_07_24_수 (0) | 2024.07.24 |
|---|---|
| 2024_07_23_화~ 07_24_수 (0) | 2024.07.23 |
| 2024_07_19_금 ⭐⭐⭐ (0) | 2024.07.19 |
| 2024_07_18_목 (0) | 2024.07.18 |
| 2024_07_17_수 (0) | 2024.07.17 |
