자바(java) - [06-D3] GET, POST 전송 방식, Form, Javascript 연동 실습


[06-D3] GET, POST 전송 방식, Form, Javascript 연동 실습

[01] Form 전송 방식

java, java, java, java, java학원, java, ccna, ccnp, 오라클, oracle, ocp, ocp 10g, 오라클, ms, microsoft, mcse, 마이크로소프트, mcse

1. GET 전송 방식
 
     - 전송할 데이터를 문자열 형태로 URL의 뒤에 인수로 붙여서
       전송합니다. 따라서 보안성이 없어 누구나 전송 내용을
       볼 수 있습니다.
       Form 태그에서의 'GET'방식은 서버로 전송시 서버의 처리가
       지연될 경우 중복해서 요청이 이루어 지는 문제가 있음으로
       사용하지 않습니다.

java, java, java, java, java학원, java, ccna, ccnp, 오라클, oracle, ocp, ocp 10g, 오라클, ms, microsoft, mcse, 마이크로소프트, mcse

 

 

2. POST 전송 방식
   - 파일의 형태로 전송됨으로 URL상에 나타나지않아 보안성이 있습니다.
   - GET방식에 비해서 대용량의 데이터를 전송할 수 있습니다.

 

 

3. 실습 폴더 설정
   . webapps/method        : *.html, *.jsp, *.js, *.css, 하위폴더
   . webapps/method/WEB-INF: *.xml, web.xml환경 설정 파일, jsp인식 안됨
   . webapps/method/WEB-INF/classes: servlet, *.classes Beans 파일

   - 한글 깨짐 방지
     <% request.setCharacterEncoding("euc-kr"); %>

 

 

4. <FORM>태그에서의 전송 실습

>>>>>> method/form.jsp, http://127.0.0.1:8081/method/form.jsp

<%@ page contentType="text/html; charset=euc-kr" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>GET 테스트</title>
<script language="javascript">

java, java, java, java, java학원, java, ccna, ccnp, 오라클, oracle, ocp, ocp 10g, 오라클, ms, microsoft, mcse, 마이크로소프트, mcse

// URL을 이용하여 전송함으로 GET 방식
function order(){
    // ?: 인수의 시작, &: 인수의 연결
    var str = './form_proc.jsp';
    str = str + '?product=LG PDA';
    str = str + '&price=350000';
    str = str + '&explain=기타: 2대이상 사지마세요';
    str = str + '&cnt=5';

    location.href = str;
}
</script>
</head>

<body>
<table width="548" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="705" bgcolor="#00FF00">ⓐ Form GET 방식 (4 X 2) </td>
  </tr>
  <tr>
    <td><p align="left">&nbsp;</p>
      <div align="center">
<form name="frmGet" method="get" action="./form_proc.jsp">
<input type="hidden" name="product" value="LG PDA" />
<input type="hidden" name="price" value="350000" />
<input type="hidden" name="explain" value="무조건 사세요." />  
        <table width="529" border="0" cellspacing="1" cellpadding="1">
          <tr>
            <td width="130" rowspan="5">
   <img src="./images/pda.jpg" width="130" height="130" /></td>
            <td width="386"><div align="left">상품명: LG PDA </div></td>
          </tr>
          <tr>
            <td><div align="left">가 격 : 350,000 </div></td>
          </tr>
          <tr>
            <td><div align="left">상세설명: 무조건 사세요. </div></td>
          </tr>
          <tr>
            <td height="36">
   <div align="left">수량:
                <input type="text" name="cnt" />개</div>
            </td>
          </tr>
          <tr>
            <td height="28"><div align="center">
                <input type="submit" name="Submit" value="상품 주문" />
                </div>
            </label></td>
          </tr>
            </table>
     </form>
      </div>
    <label></label></td>
  </tr>
  <tr>
    <td bgcolor="#00FF00">ⓑ URL상의 GET 방식 </td>
  </tr>
  <tr>
    <td>&nbsp;
<a href='./form_proc.jsp?product=LG PDA&price=350000&explain=메모기능 좋습니다.&cnt=5'>상품 주문하기</a>
&nbsp;&nbsp;&nbsp;
<a href='javascript:order()'>자바스크립트로 상품 주문</a>
<br><br>
</td>
  </tr>

  <tr>
    <td width="705" bgcolor="#00FF00">ⓒ Form POST 방식 (4 X 2) </td>
  </tr>
  <tr>
    <td><p align="left">&nbsp;</p>
      <div align="center">
 
<form name="frmPost" method="post" action="./form_proc.jsp">
<input type="hidden" name="product" value="LG PDA" />
<input type="hidden" name="price" value="350000" />
<input type="hidden" name="explain" value="무조건 사세요." />  
        <table width="529" border="0" cellspacing="1" cellpadding="1">
          <tr>
            <td width="130" rowspan="5"><img src="./images/pda.jpg" width="130" height="130" /></td>
            <td width="386"><div align="left">상품명: LG PDA </div></td>
          </tr>
          <tr>
            <td><div align="left">가 격 : 350,000 </div></td>
          </tr>
          <tr>
            <td><div align="left">상세설명: 무조건 사세요. </div></td>
          </tr>
          <tr>
            <td height="36"><div align="left">수량:
                <input type="text" name="cnt" />
개</div></td>
          </tr>
          <tr>
            <td height="28"><div align="center">
                <input type="submit" name="Submit" value="상품 주문" />
                </div>
            </label></td>
          </tr>
            </table> 
</form>
      </div>
    <label></label></td>
  </tr>


</table>
<p>&nbsp;</p>
</body>
</html>

 

 

>>>>> form_proc.jsp

<%@ page contentType="text/html; charset=euc-kr" language="java" import="java.sql.*" errorPage="" %>
<% request.setCharacterEncoding("euc-kr"); %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>전송된 데이터 처리</title>
</head>

<body>
<h1>
<%
String product = request.getParameter("product");
int price = Integer.parseInt(request.getParameter("price"));
int cnt = Integer.parseInt(request.getParameter("cnt"));
String explain = request.getParameter("explain");

out.println("전송된 데이터<br>");
out.println("상품명: " + product + "<br>");
out.println("상품 설명: " + explain + "<br>");
out.println("가격: " + price + "<br>");
out.println("수량: " + cnt + "<br>");
out.println("총 구매 금액: " + (price * cnt) + "<br>");
%>
</h1>
</body>
</html>

 

 

 

[02] Form, Javascript 연동 실습

     - javascript는 사용자가 키보드 입력 및 마우스등을 클릭할 경우
       그 이벤트를 처리하는 역활을 합니다.

 

>>>>> javascript.html, http://127.0.0.1:8081/method/javascript.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<script language="javascript">
function order(){
    // 입력 값 검사
 var f = document.test; // test 폼 객체를 가져옵니다.
 
 // test 폼의 id 태그의 값이 비어 있다면
 if(f.id.value == ""){ 
     alert("아이디를 입력해주세요.");
  f.id.focus();      // 마우스 커서를 id 태그로 보냄
  return;            // 실행 종료
 }
 
 // id 태그의 문자수(length)는 3 ~ 15자
 if (f.id.value.length < 3){
     alert("아이디는 3자 이상이어야 합니다.");
  f.id.focus();
  return;
 }
 
 // id 태그의 문자수가 15자 이하인지 체크
 if (f.id.value.length > 15){
     alert("아이디는 15자 이하이어야 합니다.");
  f.id.focus();
  return;
 }
 
 if( f.pass.value == ""){
     alert("비밀번호를 입력해주세요.");
  f.pass.focus();
  return;
 }
 
 alert("입력값: " + f.id.value + "  " + f.pass.value);
 f.submit(); // proc.jsp로 폼 전송
}
</script>
</head>

<body>
<form name='test' method='post' action='./javascript_proc.jsp'>
<table width="500" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td colspan="2" bgcolor="#00FF00"><div align="center">로그인</div></td>
  </tr>
  <tr>
    <td width="154" bgcolor="#FFCC33">ID</td>
    <td width="333" bgcolor="#FFCC33"><label>
      <input type="text" name="id" />
    </label></td>
  </tr>
  <tr>
    <td bgcolor="#FFCC33">PASSWORD</td>
    <td bgcolor="#FFCC33"><label>
      <input type="password" name="pass" />
    </label></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF00"><label>
      <div align="center">
        <input type="button" name="Submit" value="확인"
  onclick = "order()"/>
      </div>
    </label></td>
  </tr>
</table>
</form>
</body>
</html>

 

 

>>>>> javascript_proc.jsp

<%@ page contentType="text/html; charset=euc-kr" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
</head>
<body>
<h1>
<%
String id = request.getParameter("id");
String pass = request.getParameter("pass");

out.println("아이디: " + id);
out.println("패스워드: " + pass);
%>
</h1>
</body>
</html>

이 게시물을..


태초에 나는 개그이야기를 만들었다.
내말을 믿고 나를 따르면 천당,
내말을 믿지않고 나를 따르지 않으면 지옥,
나는 하늘나라(우주)에 사느니라.

그럼 난 외계인?