[JAVA] JDK 실습 (6)

 

 

Ajax 비동기 실습

: 전체 웹페이지를 새로고침 하지 않고도 특정 부분만 새로고침 시킬 수 있다!

 

 

DB 테이블 확인

• sqlplus system/1234
• desc login; 생성 및 데이터 삽입

 drop table login;
 create table login( 
   userid varchar2(10) primary key ,
   pwd varchar2(10) not null 
 );

 commit;
 insert into login values( 'sky' , '1234' );
 insert into login values( 'blue' , '1234' );
 insert into login values( 'tis' , '1234' );

 commit ;
 select * from  login ;

 

 

 

 

Login Ajax 코드 알아보기

eclipse 실행(Web0812 프로젝트)

• login.jsp > Save as... > Glogin.jsp 생성
• loginSave.jsp > Save as... > GloginSave.jsp 생성
• login_Ajax.jsp, login_List.jsp 파일 다운로드

login_Ajax.jsp

0.00MB

login_List.jsp

0.00MB

 

 

login_Ajax.jsp 실행 화면

 

login_Ajax.jsp 실행 결과

LOG-IN 버튼 누른 후

 

알 수 있는 점

└▶ 화면은 다르지만 두 화면 모두 url이 같다/

└▶ 즉슨, 첫 번째 화면에서 로그인 후, 두 번째 화면을 위에 덮어씌운 것.

└▶ 두 번째 화면을 innerhtml 로 뿌린 거다.

     └▷ 예전에는 login_List.jsp 페이지로 아예 이동을 한 뒤에 처리를 했었음.

 

 

 

login_Ajax.jsp

<script type="text/javascript">
    var xhr; 
    function first( ){
    // 서버에 데이터를 요청하기 위한 객체
    return new XMLHttpRequest();
    }
</script>

• XMLHttpRequest  -  현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다.
  • XMLHttpRequest 객체는 서버로부터 XML 데이터(이외도 가능)을 전송받아 처리하는데 사용한다.
  • 웹페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 데이터를 전송받을 수 있다.
  • 즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만 갱신 가능하다.

 

 

function two(){  
    var a=document.getElementById("userid").value; 
    var b=document.getElementById("pwd").value; 

    var url="login_List.jsp?UID="+a+"&UPWD="+b;

    xhr = first();
    xhr.onreadystatechange=aws;
    xhr.open("GET", url, true);
    xhr.send();
 }

input 태그에 입력값(아이디, 비밀번호)를 가져와 요청 URL을 만든다.

first() 함수를 호출하여 XMLHttpRequest 객체를 받은 뒤 GET 요청을 보낸다.

 

• xhr.onreadystatechange :xhr 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다. 작업의 주체인 xmlhttprequest 객체에게 서버로 부터 응답을 받을 때까지 대기하고 있다가, 응답을 받으면 콜백 함수로 호출하라는 이벤트 핸들러이다. 여기서 콜백 함수는 aws() 
  • readyState 프로퍼티 : XMLHttpRequest 객체의 현재 상태를 나타낸다.
    
    1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성된다.
    2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행된다.
    3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착한다.
    4. LOADING (숫자 3) : 요청한 데이터를 처리 중.
    5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료.

• document.getElementById("my").innerHTML= message
  • <div id="my"> 태그 안에 내용을 요청하여 응답 받은 데이터로 바꿈.
    • responseText 프로퍼티가 이를 가지고있음.

• open()  -  서버에게 요청을 보냄
  • open(요청 방식, 불러올 데이터 주소, 비동기/동기 여부, 사용자 이름, 암호)
    • 요청 방식: GET or POST
    • 데이터 주소: 모든 파일 종류 가능
    • 비동기/동기 여부: true 비동기, false 동기

 

 

  function aws( ){
    if(xhr.readyState=4){
      if(xhr.status==200){
          var message = xhr.responseText;
          document.getElementById("my").innerHTML= message ;
      }
    }
  }
</script>

• aws() 에서 readyState 프로퍼티  -  XMLHttpRequest 객체의 현재 상태를 알려줌
  1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.
  2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.
  3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.
  4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.
  5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
• aws() 에서 status 프로퍼티  -  서버의 문서 상태를 나타냄.
  • 200 : 서버에 문서가 존재함
  • 404 : 서버에 문서가 존재하지 않음

 

 

 

 

login_List.jsp

<% 
   String usera = request.getParameter("UID");
   String pwdb = request.getParameter("UPWD");
  try{
   msg="select count(*) as cnt from login where userid =? and pwd =? ";
   PST=CN.prepareStatement(msg);
   		PST.setString(1, usera);
   		PST.setString(2, pwdb);
   RS=PST.executeQuery();
  }catch(Exception ex){ System.out.println(ex); }
 if(RS.next()==true){ Gtotal=RS.getInt("cnt"); }
 
 if(Gtotal>0){  
%>

url에 파라미터로 넘겨진 아이디와 비밀번호를 각각 저장한다.

DB에서 검색할 select 조건문을 만든 뒤 저장한 아이디와 비밀번호를 각각 대입해 쿼리문을 날린다.

 

검색 결과가 0이상 = 사용자가 존재한다는 뜻이므로 하단 html 코드를 통해 로그인 성공 메세지를 띄운다.

 

 

<font size=7 color=purple>
	<b><%= usera %>님 로그인 성공!!!</b> <br>
</font>

<img src="images/bt_login.gif" width=450 height=70><p>
<img src="./images/lollipop.gif" />
<img src="./images/marshmallow.gif" />
<img src="./images/nougat.gif" />
<img src="./images/lollipop.gif" />
<img src="./images/marshmallow.gif" />
<img src="./images/nougat.gif" />

로그인 성공 시 나타나는 글자와 이미지.

 

 

<%  
 }else{
   out.println("<font size=7 color=red><b></b>"+usera+"님 로그인실패</font><p>");
   out.println("<font size=7><a href='login_Ajax.jsp'>[로그인]</a></font>");
   out.println("<font size=7><a href='index.jsp'>[index]</a></font>");	
 }
%>

로그인을 실패한 경우 로그인 실패 텍스트를 출력한다.

 

 

 

 

 

jQuery로 Ajax 사용하기

• login_AjaxCOPY.jsp 파일 다운로드 - 그냥 login_Ajax.jsp 원본 파일 가지고 있는 용도

login_AjaxCOPY.jsp

0.00MB

• login2.gif 다운로드 후 images 파일에 넣기

loginjQueryAjax.jsp

0.00MB

• loginjQueryAjax.jsp 파일 다운로드

login2 (1).gif

0.00MB

• loginjSave.jsp 파일 다운로드

loginjSave.jsp

0.00MB

 

 

 

loginjQueryAjax.jsp

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jQuery를 사용하기 위한 CDN을 삽입한다.

 

 

<script type="text/javascript"> 
 $(function( ){ 
     $('#btnlogin').click( function( ){  
			$.ajax({
			  "url"  : "loginjSave.jsp" ,
			  "type" : "get",  //document.getElementById("userid").value; 
			  "data" : {UID: $('#userid').val(), UPWD: $('#pwd').val( )} ,
			   "beforeSend": function( ){ 
					$('#loading-mask').show();
					$('#msgIN').empty();
					$('#loading-mask').html("<div align=center><img src='./images/ajax-loader.gif' width=500 height=250></div> ");
					$("#loading-mask").css("opacity","0.9").stop().animate({opacity:3},9000);	
				   }, 
			  "success": function(data){
				setTimeout(function() {
					$('#loading-mask').fadeOut( );
					$('#msgIN').empty();
					$('#msg').html(data);
				}, 300);
			  },
			  "error": function(data){$('#loading-mask').fadeOut(); }
			});
	   });	 
 });
</script>

• $.ajax() - ajax를 통해 GET 요청을 보낸다.
• UID: $('#userid').val() - 데이터는 #userid, #pwd 아이디 속성을 가진 두 태그에서 가져온다.
• "beforeSend" - ajax가 서버에 요청하기 전에 실행하는 로직
  • 로딩 화면을 보여준다.
• "success" - 서버에서 요청 처리 후 로직
  • 로딩 화면을 fadeOut 한다.

 

 

jQuery에서 ajax를 사용하여 요청을 보낼 때 사용되는 기본적인 로직은 아래와 같다.

$.ajax({
	type: "POST",
	url: '/rest/name/select',
	dataType: "json",
	data: {userId:10},
	async: false, //동기처리 (기본이 true)
	success: function (json) {
		//처리 후 로직
		....
	},
	error: function (xhr, ajaxOptions, thrownError) {
		//실패 후 로직
		....
	},
	beforeSend: function( xhr ) {
		//ajax가 서버에 요청하기 전에 실행하는 로직
		....
	},
	complete: function () {
		//성공, 실패와 상관없이 실행하고 싶은 로직
		....
	},
});

 

 

 

html 형태는 다음과 같다.

<body>
 <div id="msg" align="center">
   <h2>loginjQeryAjax.jsp문서 jQuery로 Ajax접근  $.ajax()	</h2>
   <div id="msgIN">
	<table width="550" border="1" cellspacing="0">
	  <form name="myform" method="get">
		<tr>
			<td width=350> <b>userid: </b></td>
			<td> <input type="text" name="userid" id="userid"  value="sky"></td>
			
			<td rowspan=2 align="center">
			 <input type="button" id="btnlogin"  value="loginAjax"  >
			</td>
		</tr>
		
		<tr>
			<td width=350><b>userpw: </b> </td>
			<td>
			  <input type="text"  name="pwd" id="pwd" value="1234">       
			</td>
		</tr>
		</form>
	</table>
	</div>
	<div id="loading-mask"> </div>
 </div>
</body>

 

 

 

 

 

 

 

 

 

Ajax Pizza 페이지 실습

• pizza.jsp 파일 다운로드

pizza.jsp

0.01MB

• pizzaResult.jsp 파일 다운로드

pizzaResult.jsp

0.00MB

 

 

DB 테이블 생성

cmd > oracle SQL > pizza_user 테이블 생성

drop table pizza_user;
create table pizza_user(
pnum number(8) primary key,
name varchar2(20),
phone varchar2(15) not null,
addr varchar2(30) not null
);

 

 

시퀀스를 생성한다.

drop sequence pizza_seq ;
create sequence pizza_seq ;

 

 

데이터를 삽입하고 전체 출력해본다.

insert into pizza_user(pnum,name,phone,addr)
values(pizza_seq.nextval,'고길동','111-1111','서울 소확구 블루동');
insert into pizza_user(pnum,name,phone,addr)
values(pizza_seq.nextval,'둘리','222-2222','서울 은하구 레하동');
commit;

select * from pizza_user;
commit;

 

 

 

 

JAVA 코드 구현

 

pizza.jsp

<script type="text/javascript">
	// XMLHttpRequest 객체 담을 변수
	var req = false;
    
    // req 객체 초기화
	init = function(){
		// Ajax는 XMLHttpRequest객체를 생성하는 것이 첫 번째 단계다.
		try{
			req=new XMLHttpRequest(); // JavaScript 객체. 서버로부터 응답 받은 내용을 파싱
		}catch(e){
			try{
				// IE 6이하 버전일 경우
				req = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e2){
				req=false;
			}
		}
		if(!req) alert("req객체 생성 실패");
	}

 

getUserInfo = function(){
    // 1. 사용자가 입력한 전화번호 받기
    var val=$('#phone').val();
    var url="pizzaResult.jsp?phone="+val;

    // 2. 서버에 전화번호를 가지고 요청을 보내자.
    req.open("GET",url, true);

    // 3. 콜백함수 지정
    req.onreadystatechange = updatePage;
    // 콜백함수란? => 자동으로 호출해주는 함수

    // 4. 요청을 전송
    req.send(null);
    /* send(body);
    get방식 요청일 경우 null을 넘긴다.
    post방식일 경우 body부분에 전송할 문자열을
    지정해서 보낸다.
    */
}

 

 

 

updatePage = function(){
    if(req.readyState==4 && req.status==200){
        // 응답 성공이 왔다면
        var res = req.responseText;

        //구분자 '|'를 기준으로 쪼개어 배열에 할당
        var data = res.split("|");

        //split('구분자') :구분자'|'를 기준으로 문자열을 쪼개어 배열형태로 반환한다.
        var mIdx=data[0];    
        var mName=data[1];
        var mAddr=data[2];

        if(parseInt(mIdx)==0){
            //alert('비회원');
            $('#userInfo').html("");
            $('#userInfo').hide(1000);
            $('#nonUser').show(1000);
        }else{
            var str="<ul>";
            str += "<li>회원번호: "+mIdx+"</li>";
            str += "<li>회원이름: "+mName+"</li>";
            str += "<li>회원주소: "+mAddr+"</li>";
            str += "</ul>";
            $('#userInfo').html(str);
            $('#userInfo').show(1000);
            $('#nonUser').hide(1000);
        }
    }
}
window.onload = init;
</script>

 

 

 

 

 

html 형식은 아래와 같다.

<body>
<div class="section">
<div class="container">
	<h1>Pizza Order Page</h1>
	<form role="form" class="form-horizontal"  	name="orderF" id="orderF"   method="POST">
		<div class="form-group">
			<p class="text-info">
			<b>귀하의 전화번호를 입력하세요:</b>
			<input type="text" size="20" name="phone" id="phone" onchange="getUserInfo()"  class="form-control"/>
			</p>
			<p class="text-danger">
			<b>
				귀하가 주문하신 피자는 아래 주소로 배달됩니다.
			</b>	
			</p>
			<div id="userInfo"></div>
			<div id="address"></div>
			<!-- 비회원 입력 폼 : 비회원일 경우 주소입력 폼을 보여줌 -->
			<div id="nonUser" style="display:none;">
				주소: <input type="text" name="addr" id="addr"
						size="60" style="border:2px solid maroon;" class="form-control"/>
			</div>
			
			<p class="text-info">
			<b>주문 내역을 아래에 기입하세요</b></p>
			<p>
				<textarea name="orderList"
				 id="orderList" rows="6" cols="50" class="form-control"></textarea>
			</p>
			<p>
				<input type="submit" value="Order Pizza" class="btn btn-primary"/>
			</p>
		</div>
	</form>
</div>
</div>
</body>

 

 

 

피자 주문 화면

 

 

DB에 저장된 전화번호를 입력하면 아래 회원 정보가 자동으로 생겨난다ㅏ.

 

 

 

 

pizzaResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %>
<%@ include file="./ssi.jsp" %>
<%
	String phone=request.getParameter("phone");
	System.out.println("phone="+phone);
	
	// Context ctx=new InitialContext();
	// DataSource ds=(DataSource)ctx.lookup("java:comp/env/jdbc/myoracle");
	// Connection con=ds.getConnection();
	
	String sql=" select * from pizza_user where  phone=?";
	PST=CN.prepareStatement(sql);
	PST.setString(1,phone);
	RS=PST.executeQuery();
	
	int idx=0;
	String name="", addr="";
	while(RS.next()==true){
		idx=RS.getInt("pnum");
		name=RS.getString("name");
		addr=RS.getString("addr");
	}

%>
<%=idx%>|<%=name%>|<%=addr%>

 

 

 

 

 

JAVA 실습 - MVC 모델로 작성하기

 

MVC 모델?

• 3.1. MVC 패턴 | 자바 웹 프로그래밍 (dinfree.com)
• [디자인 패턴] MVC 패턴. Model, View, Controller 자바로 보는 이해 빠른 간단한 예제 (apeltop.blogspot.com)
• Java MVC 패턴 바로 알기 (tistory.com)
• [JSP] MVC패턴 회원 등록, 조회하는 개간단한 예제 (tistory.com)
• [JAVA] 자바 MVC 패턴 (Model, View, Controller) (tistory.com)
• MVC 웹 프로젝트 만드는 방법 두가지 (STS / MVC 패턴 / 스프링 입문 / 백엔드 / 웹개발) (tistory.com)

 

 

• Testssi.java, TestDAO.java, TestBean.jave, Global.java

TestDAO.java

0.00MB

TestBean.java

0.00MB

Global.java

0.00MB

Testssi.java

0.00MB

• Web0812 폴더 > Java Resources > src/main/java > net.hb.common 패키지 생성 > 위에서 다운받은 파일 붙여넣기
• zkBBS 폴더 > Java Resources > src/main/java > net.hb.common > Global.jsp 붙여넣기