[Ajax]/Program source (Ajax)
[AJax] 20231227 [프로그램 소스] - web.xml, Test03Send, AjaxTest03, Test03, Test03_ok
Jelly-fish
2023. 12. 28. 08:44
01
AjaxApp
`AjaxTest03.jsp` - 클라이언트가 입력한 id가 자료구조(DB 대체)에 있는지 중복검사
【페이지 이동 순서 정리】
① 사용자가 `http://localhost:3306/AjaxApp/test03send.do` url 요청
② web.xml 에 의해 컨트롤러(Controller) 클래스인 `Test03Send.java`가 동작
<!-- AJAX 관련 실습 --> <!-- AjaxTest03 → 아이디 중복 검사 --> <servlet> <servlet-name>test03send</servlet-name> <servlet-class>com.test.ajax.Test03Send</servlet-class> </servlet> <servlet-mapping> <servlet-name>test03send</servlet-name> <url-pattern>/test03send.do</url-pattern> </servlet-mapping>
③ 컨트롤러 `Test03Send.java`에서 클라이언트를 최초 요청 View 페이지인 `AjaxTest03.jsp`로 이동시킴.
// 사용자 정의 메소드 protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드 //String view = "WEB-INF/view/AjaxTest03.jsp"; // 원래 클라이언트가 바로 접근할 수 없도록 // View 페이지를 WEB-INF 폴더에 숨겨놓았다. //( WEB-INF : 클라이언트 접근 불가능한 폴더) String view = "AjaxTest03.jsp"; RequestDispatcher dispatcher = request.getRequestDispatcher(view); dispatcher.forward(request, response); }
④ View 페이지인 `AjaxTest03.jsp`에서 입력값을 클라이언트에게 입력한 후, `test03.do` 페이지에 AJAX를 요청하도록 환경 설정
『AjaxTest03.jsp - `check()` 메소드 내부』
- `test03.do` 페이지에 GET 방식으로 비동기 처리 AJAX를 요청하는 구문
//*************************************************** // URL 준비 //*************************************************** var url = "test03.do?id=" + id; //*************************************************** // AJAX 객체(→ XMLHttpRequest 객체) 생성 //*************************************************** ajax = createAjax(); //-- ajax.js //*************************************************** // 환경 설정(『open("요청방식", "URL", 비동기/동기)』) //*************************************************** ajax.open("GET", url, true);
⑤ web.xml에 의해 컨트롤러(Controller) 클래스 `Test03.java`가 동작
<servlet> <servlet-name>test03</servlet-name> <servlet-class>com.test.ajax.Test03</servlet-class> </servlet> <servlet-mapping> <servlet-name>test03</servlet-name> <url-pattern>/test03.do</url-pattern> </servlet-mapping>
⑥ `Test03.java` 에서 업무 로직 처리(아이디 중복검사) 이후 중복되는 아이디를 발견했을 때는 '1', 중복되는 아이디를 발견하지 못했을 때는 '0'을 `request.setAttribute`를 한 후,
`Test03_ok.jsp`로 forwarding 처리를 한다.
// 사용자 정의 메소드 protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드 // 이전 페이지(AjaxTest03.jsp)에서 넘어온 데이터 수신 // → id String id = request.getParameter("id"); // id 가 pbg 일 경우 // Model → DB 액션 처리 요청 → DAO (처리 요청) // --------------- // DTO, Connection 활용 // // → SELECT COUNT(*) AS COUNT FROM MEMBER WHERE ID = 'pbg'; // ----------------- ----- // 수신 처리 넘겨주는 데이터 // --==>> 1 or 0 // ※ DB 구성을 별도로 하지 않았기 때문에 // 컬렉션 자료구조로 대신함~!!! ArrayList<String> db = new ArrayList<String>(); db.add("superman"); db.add("batman"); db.add("admin"); int result = 0; for (String item : db) { if (item.equals(id)) { result = 1; } } // 최종 result 에 1 이 남아있으면... 이미 존재하는 id → 사용 불가 // 1 로 바뀌지 않고 0 이 계속 남아있으면... 존재하지 않는 id → 사용 가능 request.setAttribute("result", result); RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp"); dispatcher.forward(request, response);
○ [AJAX 처리]★★★
★ Test03_ok.jsp 의 조각 데이터 `result`를 가져오고,
AjaxTest03.jsp의 `callBack()` 함수에서
▷ 0일 경우에는 "사용 가능한 아이디입니다."
▷ 1일 경우에는 : "이미 사용중인 아이디입니다."
를 <span> 태그 사이의 `innerHTML`(`innerText`)로 넣어준다.
⑦ 최종적으로, `Test03_ok.jsp`에서 수신한 `result(0 or 1)` 를
AjaxTest02.jsp 의 `callBack()` 함수의 data 변수에 `int` 형으로 담아서 바인딩해 온다.
그리고, 그 값이 0일 때는 `"사용 가능한 아이디입니다."`를
그 값이 1일 때는 `"이미 사용중인 아이디입니다."`를 `<span id="result"></span>` 태그 사이에
넣어 주도록 한다.
【`Test03_ok.jsp`】 - result를 EL(JSTL)로 수신.
<%@ page contentType="text/html; charset=UTF-8"%> ${result}
『AjaxTest03.jsp - `callBack()` 메소드』
- data 변수에 `ajax.responseText`로 `result`를 받아와서 저장한 후
그 값이 0일 때는 `"사용 가능한 아이디입니다."`를
그 값이 1일 때는 `"이미 사용중인 아이디입니다."`를 `<span id="result"></span>` 태그 사이에
넣어준다.
// 아이디 중복 검사의 결과(1 or 0)를 통보받아 // 사용자에게 메세지 출력 → span → #result function callBack() { // 외부로 추출된 업무 처리 내용 구성(responseText / responseXML) var data = ajax.responseText; data = parseInt(data); if (data==0) { //document.getElementById("result").innerHTML // Text 를 넣을 때는, innerHTML 대신에 innerText 를 넣을 수도 있다. document.getElementById("result").innerText = "사용 가능한 아이디입니다."; } else { document.getElementById("result").innerText = "이미 사용중인 아이디입니다."; } }
web.xml (최초 요청 페이지 `AjaxTest03.jsp`에 클라이언트 접근하도록 하는 컨트롤러 `Test03Send.java` 동작)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>WebApp00</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- AJAX 관련 실습 -->
<!-- AjaxTest03 → 아이디 중복 검사 -->
<servlet>
<servlet-name>test03send</servlet-name>
<servlet-class>com.test.ajax.Test03Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test03send</servlet-name>
<url-pattern>/test03send.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>test03</servlet-name>
<servlet-class>com.test.ajax.Test03</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test03</servlet-name>
<url-pattern>/test03.do</url-pattern>
</servlet-mapping>
</web-app>
Test03Send.java
/*========================
ServletSample.java
=========================*/
package com.test.ajax;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class Test03 extends HttpServlet
{
private static final long serialVersionUID = 1L;
ArrayList<String> idList = new ArrayList<String>();
// 초기화 블럭
{
// 미리 id를 넣어둔다.
idList.add("superman");
idList.add("batman");
idList.add("admin");
}
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 이전 페이지(AjaxTest03.jsp)에서 넘어온 데이터 수신
// → id
String id = request.getParameter("id");
// id 가 pbg 일 경우
// Model → DB 액션 처리 요청 → DAO (처리 요청)
// ---------------
// DTO, Connection 활용
//
// → SELECT COUNT(*) AS COUNT FROM MEMBER WHERE ID = 'pbg';
// ----------------- -----
// 수신 처리 넘겨주는 데이터
// --==>> 1 or 0
// ※ DB 구성을 별도로 하지 않았기 때문에
// 컬렉션 자료구조로 대신함~!!!
ArrayList<String> db = new ArrayList<String>();
db.add("superman");
db.add("batman");
db.add("admin");
int result = 0;
for (String item : db)
{
if (item.equals(id))
{
result = 1;
}
}
// 최종 result 에 1 이 남아있으면... 이미 존재하는 id → 사용 불가
// 1 로 바뀌지 않고 0 이 계속 남아있으면... 존재하지 않는 id → 사용 가능
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp");
dispatcher.forward(request, response);
/*
String message = "";
boolean flag = true;
//***********************************************************
// 만약, id가 idList 에 존재한다면...
// → message = "이미 존재하는 아이디 입니다."
// 만약, id가 idList 에 존재하지 않는다면...
// → message = "사용 가능한 아이디 입니다."
//***********************************************************
for (String str : idList)
{
//***********************************************************
// 한번이라도 idList의 아이디와 같은 아이디가 발견되었다면
// flag 를 false 로 변경시킨다.
//***********************************************************
if (str.equals(id))
{
flag = false;
}
}
//***********************************************************
// 만약, flag 가 true 라면...
// 중복되는 아이디를 발견하지 못했음을 의미한다.
// 따라서 메세지에 "사용 가능한 아이디 입니다."를 대입한다.
//***********************************************************
//***********************************************************
// flag가 false라면
// 중복되는 아이디를 발견한 것이므로
// 따라서 메세지에 "이미 존재하는 아이디 입니다."를 대입한다.
//***********************************************************
if (flag)
{
message = "사용 가능한 아이디 입니다.";
}
else if (!flag)
{
message = "이미 존재하는 아이디 입니다.";
}
//***********************************************************
// 업무 처리를 완료했으므로 setAttribute를 한다.
//***********************************************************
request.setAttribute("message", message);
//***********************************************************
// Test03_ok.jsp 로 forwarding 한다.
//***********************************************************
RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp");
dispatcher.forward(request, response);
*/
}
}
AjaxTest03.jsp
(중복검사 버튼 클릭시 `http://localhost:3306/AjaxApp/test03.do` 페이지 요청.→ Test03.java 컨트롤러 작동)
<%@page import="java.util.ArrayList"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest03.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
#result
{
display: inline-block;
width: 250px;
color: #F33;
font-size: small;
}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">
function check()
{
// 확인
//alert("함수 호출~!!!");
//***************************************************
// 데이터 수집
//***************************************************
var id = document.getElementById("id").value;
//***************************************************
// URL 준비
//***************************************************
var url = "test03.do?id=" + id;
//***************************************************
// AJAX 객체(→ XMLHttpRequest 객체) 생성
//***************************************************
ajax = createAjax(); //-- ajax.js
//***************************************************
// 환경 설정(『open("요청방식", "URL", 비동기/동기)』)
//***************************************************
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
{
// 업무 처리 (모듈화 → 외부로 추출)
callBack();
}
/*
if (ajax.readyState==4)
{
if (ajax.status==200)
{
callBack();
}
}
*/
};
// AJAX 요청.
ajax.send("");
}
// 아이디 중복 검사의 결과(1 or 0)를 통보받아
// 사용자에게 메세지 출력 → span → #result
function callBack()
{
// 외부로 추출된 업무 처리 내용 구성(responseText / responseXML)
var data = ajax.responseText;
data = parseInt(data);
if (data==0)
{
//document.getElementById("result").innerHTML
// Text 를 넣을 때는, innerHTML 대신에 innerText 를 넣을 수도 있다.
document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
}
else
{
document.getElementById("result").innerText = "이미 사용중인 아이디입니다.";
}
/*
var message = ajax.responseText;
document.getElementById("result").innerHTML = message;
*/
}
</script>
</head>
<body>
<div>
<h1>회원 가입</h1>
<p>- Test03Send.java</p>
<p>- AjaxTest03.jsp</p>
<p>- ajax.js</p>
<p>- main.css</p>
<p>- Test03.java</p>
<p>- Test03_ok.jsp</p>
<p>- web.xml</p>
<p>※ url : test03send.do / test03.do</p>
<p>※ 자료구조 활용 → superman / batman / admin </p>
</div>
<table class="table">
<tr>
<th>아이디</th>
<td>
<input type="text" id="id" class="txt control">
<input type="button" value="중복검사" class="btn control" onclick="check()">
<span id="result"></span>
<!-- 아이디 존재하지 않을 경우 :
<span id="result">사용 가능한 아이디 입니다.</span> -->
<!-- 아이디 존재할 경우 :
<span id="result">이미 존재하는 아이디 입니다.</span> -->
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input type="text" id="name" class="txt control">
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" id="addr" class="txt control">
</td>
</tr>
</table>
</body>
</html>
Test03.java (업무처리 및 결과 수신 페이지(`Test03_ok.jsp`)로 forwarding 처리.)
/*========================
ServletSample.java
=========================*/
package com.test.ajax;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class Test03 extends HttpServlet
{
private static final long serialVersionUID = 1L;
ArrayList<String> idList = new ArrayList<String>();
// 초기화 블럭
{
// 미리 id를 넣어둔다.
idList.add("superman");
idList.add("batman");
idList.add("admin");
}
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 이전 페이지(AjaxTest03.jsp)에서 넘어온 데이터 수신
// → id
String id = request.getParameter("id");
// id 가 pbg 일 경우
// Model → DB 액션 처리 요청 → DAO (처리 요청)
// ---------------
// DTO, Connection 활용
//
// → SELECT COUNT(*) AS COUNT FROM MEMBER WHERE ID = 'pbg';
// ----------------- -----
// 수신 처리 넘겨주는 데이터
// --==>> 1 or 0
// ※ DB 구성을 별도로 하지 않았기 때문에
// 컬렉션 자료구조로 대신함~!!!
ArrayList<String> db = new ArrayList<String>();
db.add("superman");
db.add("batman");
db.add("admin");
int result = 0;
for (String item : db)
{
if (item.equals(id))
{
result = 1;
}
}
// 최종 result 에 1 이 남아있으면... 이미 존재하는 id → 사용 불가
// 1 로 바뀌지 않고 0 이 계속 남아있으면... 존재하지 않는 id → 사용 가능
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp");
dispatcher.forward(request, response);
/*
String message = "";
boolean flag = true;
//***********************************************************
// 만약, id가 idList 에 존재한다면...
// → message = "이미 존재하는 아이디 입니다."
// 만약, id가 idList 에 존재하지 않는다면...
// → message = "사용 가능한 아이디 입니다."
//***********************************************************
for (String str : idList)
{
//***********************************************************
// 한번이라도 idList의 아이디와 같은 아이디가 발견되었다면
// flag 를 false 로 변경시킨다.
//***********************************************************
if (str.equals(id))
{
flag = false;
}
}
//***********************************************************
// 만약, flag 가 true 라면...
// 중복되는 아이디를 발견하지 못했음을 의미한다.
// 따라서 메세지에 "사용 가능한 아이디 입니다."를 대입한다.
//***********************************************************
//***********************************************************
// flag가 false라면
// 중복되는 아이디를 발견한 것이므로
// 따라서 메세지에 "이미 존재하는 아이디 입니다."를 대입한다.
//***********************************************************
if (flag)
{
message = "사용 가능한 아이디 입니다.";
}
else if (!flag)
{
message = "이미 존재하는 아이디 입니다.";
}
//***********************************************************
// 업무 처리를 완료했으므로 setAttribute를 한다.
//***********************************************************
request.setAttribute("message", message);
//***********************************************************
// Test03_ok.jsp 로 forwarding 한다.
//***********************************************************
RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp");
dispatcher.forward(request, response);
*/
}
}