[AJAX] 002. AJAX 관찰 실습(2)

SsY 2023. 6. 15. 18:00

728x90

AjaxApp

AjaxTest04 (내 풀이)

AjaxTest04.jsp

<%@ 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>AjaxTest04.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">

	#result
	{
		width: 250px;
		color: #F33;
		font-size: small;
		/* display : none; */
		display : inline; 
	}
</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_ok.action?id=" + id;
		
		// AJAX 객체 생성 (XMLHttpRequest 객체)
		ajax = createAjax();  // 임포트한 js 파일에서 정의한 메소드 호출 
		
		// 환경 설정( open("메소드방식", "URL", 비동기/동기 T/F로) )
		ajax.open("GET", url, true);
		
		//ajax.onreadystatechange = 기능;
		ajax.onreadystatechange = function()
		{
			if(ajax.readyState==4 && ajax.status==200) 
			{
				// 업무 수행 → 외부로 추출(별도 함수로 정의) → 정의된 함수 호출 
				callBack();
			}
		};
		
		ajax.send("");
		
	}
	
	// 외부로 추출된 업무 구성 -> 함수 정의
	// → 아이디 중복 검사 결과(1 or 0) 를 통보받고 
	// 사용자에게 메세지 출력 → span →  #result
	function callBack()
	{
		// responseText / responseXML (받은 값이 TEXT 기반인지 XML 기반인지..)
		
		var data = parseInt(ajax.responseText);
		
		if (data == 0)
		{
			document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
		}
		else
		{
			document.getElementById("result").innerText = "이미 사용중인 아이디입니다.";
		}
		
	}// end callBack()
	
	function findAddr()
	{
		var addr = document.getElementById("addr").value;
		
		var url = "test04_ok.action?addr="+addr;
		
		ajax = createAjax();
		
		ajax.onreadystatechange = function ()
		{
			if (ajax.readyState==4 && ajax.status==200)
			{
				// 기능 함수 호출
				setAddr();
			}
		};
		
		ajax.open("GET",url,true);
		ajax.send("");
		
	}// end findAddr()
	
	function setAddr()
	{
		// (HTML 태그로 감싼 String으로) 가져온 리스트 결과 값을 selectbox 에 배치하는 함수
		var listStr = ajax.responseText;
		
		//alert(listStr);
		
		document.getElementById("addrResult").innerHTML += listStr;
				
	}// end setAddr()

	function change()
	{
		// selectBox 에서 값을 변경했을 때
		// #addr1, #addr2 에 각각 선택된 우편번호, 기본 주소 setting 하는 함수
		var str = document.getElementById("addrResult").value;
		var dto = str.split(",");
		alert("dto[0] : " + dto[0] + "\ndto[1] : " + dto[1]);
		document.getElementById("addr1").value = dto[0];
		document.getElementById("addr2").value = dto[1];
	}
</script>
</head>

<body>

<div>
	<h1>회원 가입</h1>
	<p>- 우편번호 검색</p>		
	<p>- ※ url → http://localhost:3306/AjaxApp/test04.action</p>
	<p>- 		→ http://localhost:3306/AjaxApp/test04_ok.action</p>
	<hr>
</div>

<table class="table">
	<tr>
		<th>아이디</th>
		<td>
			<input type="text" id="id" class="control">
			<input type="button" value="중복검사" class="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="control">(테스트)
		</td>
	</tr>
	
	<tr>
		<th>주소</th>
		<td>
			<input type="text" id="addr" class="control" placeholder="동 입력">
			<input type="button" value="검색하기" class="control" onclick="findAddr()">
			<br>
			<select id="addrResult" class="control" onchange="change()">
				<option>주소를 입력하세요</option>
			</select>
		</td>
	</tr>
	
	<tr>
		<th>주소 검색 결과</th>
		<td>
			 <input type="text" id="addr1" class="control" readonly="readonly"
			 style="width: 200px;">
			 <br>
			 <input type="text" id="addr2" class="control" readonly="readonly"
			 style="width: 400px;">
			 <br>
			 <input type="text" id="addr3" class="control" placeholder="상세주소를 입력하세요"
			 style="width: 400px;">
		</td>
	</tr>
	
	<tr>
		<th>기타 등등</th>
		<td>
			<input type="text" id="etc" class="control">(테스트)
		</td>
	</tr>
	
</table>



</body>
</html>

ZipCodeDTO.java

/*======================
	ZipCodeDTO.java
=======================*/

package com.test.ajax;

public class ZipCodeDTO
{
	// 주요 속성 구성
	private String zipCode;
	private String address;
	
	// 기본 생성자 형태의 사용자 정의 생성자 추가 구성
	public ZipCodeDTO()
	{
		this("","");
	}
	
	// 사용자 정의 생성자 구성
	public ZipCodeDTO(String zipCode, String address)
	{
		this.zipCode = zipCode;
		this.address = address;
	}
	
	
	// getter / setter 구성
	public String getZipCode()
	{
		return zipCode;
	}
	public void setZipCode(String zipCode)
	{
		this.zipCode = zipCode;
	}
	public String getAddress()
	{
		return address;
	}
	public void setAddress(String address)
	{
		this.address = address;
	}
	
	
}

web.xml

<?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>AjaxBackup2</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>
<!-- 	
	<servlet>
		<servlet-name></servlet-name>
		<servlet-class></servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name></servlet-name>
		<url-pattern></url-pattern>	
	</servlet-mapping>
-->

	<!-- test02.kb -->
	<servlet>
		<servlet-name>test02</servlet-name>
		<servlet-class>com.test.ajax.Test02</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test02</servlet-name>
		<url-pattern>/test02.kb</url-pattern>	
	</servlet-mapping>

	<!-- test03.action -->
	<servlet>
		<servlet-name>test03</servlet-name>
		<servlet-class>com.test.ajax.AjaxTest03</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test03</servlet-name>
		<url-pattern>/test03.action</url-pattern>	
	</servlet-mapping>

	<!-- test03_ok.action -->
	<servlet>
		<servlet-name>test03ok</servlet-name>
		<servlet-class>com.test.ajax.Test03_ok</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test03ok</servlet-name>
		<url-pattern>/test03_ok.action</url-pattern>	
	</servlet-mapping>

	<!-- test04.action -->
	<servlet>
		<servlet-name>test04</servlet-name>
		<servlet-class>com.test.ajax.AjaxTest04</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test04</servlet-name>
		<url-pattern>/test04.action</url-pattern>	
	</servlet-mapping>

	<!-- test04_ok.action -->
	<servlet>
		<servlet-name>test04ok</servlet-name>
		<servlet-class>com.test.ajax.Test04</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test04ok</servlet-name>
		<url-pattern>/test04_ok.action</url-pattern>	
	</servlet-mapping>
</web-app>

AjaxTest04.java

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTest04 extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("AjaxTest04.jsp");
		dispatcher.forward(request, response);
	}
	
}

Test04.java

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test04 extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		// 데이터 값 수신 
		// 한글 깨짐 방지
		request.setCharacterEncoding("UTF-8");
		
		String addr = request.getParameter("addr");
		ZipCodeModel model = new ZipCodeModel();
		String result = model.findAddr(addr);
		
		request.setAttribute("result", result);
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("Test04.jsp");
		dispatcher.forward(request, response);
	}
	
}

ZipCodeModel.java
ArrayList 를 String 으로 HTML 태그를 포함하여 한 줄로 전송하는 방식
responseText

package com.test.ajax;

import java.util.ArrayList;

public class ZipCodeModel
{
	public String findAddr(String addr)
	{
		String result = "";
		
		ArrayList<ZipCodeDTO> list = new ArrayList<ZipCodeDTO>();
		
		// DB 역을 수행할 ArrayList<ZipCodeDTO>
		ArrayList<ZipCodeDTO> db = new ArrayList<ZipCodeDTO>();
		ZipCodeDTO dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 13 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 17 (서교동, 용성빌딩)");
		db.add(dto);
		dto = new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 18 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 20 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-3 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-4 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-6 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 23 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 24 (서교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 171 (동교동, 아람빌딩)");
		db.add(dto);
		dto = new ZipCodeDTO("03995","서울특별시 마포구 동교로 172 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 173 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03995","서울특별시 마포구 동교로 174 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 175 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03995","서울특별시 마포구 동교로 176 (동교동, 청휘빌딩)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 177 (동교동, 동교동빌딩)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 177-1 (동교동, 동교동빌딩)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 179 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03992","서울특별시 마포구 동교로 179-5 (동교동)");
		db.add(dto);
		dto = new ZipCodeDTO("03696","서울특별시 서대문구 가좌로 15 (연희동, 연궁아파트)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-5 (연희동, 해마루)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-6 (연희동)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-7 (연희동, 연희궁빌라)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-9 (연희동)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-11 (연희동)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-13 (연희동)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-14 (연희동, 주함하우스)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-15 (연희동)");
		db.add(dto);
		dto = new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-16 (연희동, 구립연희어린이집)");
		db.add(dto);
		
		// DB에서 입력받아온 동 리스트 가져오기
		for (ZipCodeDTO res : db)
		{
			if (res.getAddress().contains(addr))
			{
				/*
				ZipCodeDTO a = new ZipCodeDTO();
				a.setAddress(res.getAddress());
				a.setZipCode(res.getZipCode());
				
				result.add(a);
				*/
				
				list.add(res);
			}
		}
		
		// 동 리스트 -> HTML 태그로 감싼 String 으로 만들어야함
		// -> 값을 넘겨줘야하기 때문에
		
		for (ZipCodeDTO res : list)
		{
			result += "<option value='"+ res.getZipCode()+"," + res.getAddress() +"'>" + res.getAddress() + "</option><br>"; 
		}

		return result;
	}
}

Test04.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
${result}

test04.action (빈파일)

AjaxTest04 (해설)

AjaxTest04.jsp
- callBack2() 함수 -- Test04_ok.jsp 와 함께 파악 할 것

<%@ 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>AjaxTest04.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">

	#result
	{
		width: 250px;
		color: #F33;
		font-size: small;
		/* display : none; */
		display : inline; 
	}
</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_ok.action?id=" + id;
		
		// AJAX 객체 생성 (XMLHttpRequest 객체)
		ajax = createAjax();  // 임포트한 js 파일에서 정의한 메소드 호출 
		
		// 환경 설정( open("메소드방식", "URL", 비동기/동기 T/F로) )
		ajax.open("GET", url, true);
		
		//ajax.onreadystatechange = 기능;
		ajax.onreadystatechange = function()
		{
			if(ajax.readyState==4 && ajax.status==200) 
			{
				// 업무 수행 → 외부로 추출(별도 함수로 정의) → 정의된 함수 호출 
				callBack();
			}
		};
		
		ajax.send("");
		
	}
	
	// 외부로 추출된 업무 구성 -> 함수 정의
	// → 아이디 중복 검사 결과(1 or 0) 를 통보받고 
	// 사용자에게 메세지 출력 → span →  #result
	function callBack()
	{
		// responseText / responseXML (받은 값이 TEXT 기반인지 XML 기반인지..)
		
		var data = parseInt(ajax.responseText);
		
		if (data == 0)
		{
			document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
		}
		else
		{
			document.getElementById("result").innerText = "이미 사용중인 아이디입니다.";
		}
		
		
	}// end callBack()
	
	/* 주소 검색 버튼 클릭 시 호출되는 함수 정의 */
	function search()
	{
		//확인
		//alert("함수호출확인");
		
		// 데이터 수집
		var addr = document.getElementById("addr").value;
		
		// url 구성
		var url = "test04_ok.action?addr="+addr;
		
		// XMLHttpRequest 객체 생성(→AJAX 객체 생성)
		ajax = createAjax();	//-- ajax.js
		
		// 설정
		ajax.open("GET",url,true);
		ajax.onreadystatechange = function()
		{
			if (ajax.readyState==4 && ajax.status==200)
			{
				// 업무 수행
				callBack2();
			}
		};
		
		ajax.send("");
	
	}// end search()
	
	// 수행해야 할 업무 추출
	// → 우편번호 검색 결과를 통보 받아서
	//    사용자에게 안내해 줄 수 있도록 처리
	function callBack2()
	{
		// XML 문서 전체의 참조 객체. (→ 흔히 XML 문서 객체라고 한다.)
		var doc = ajax.responseXML;
		
		// XML 문서의 최상위 엘리먼트(루트 엘리먼트)
		//-- 현재는 『<list>』 엘리먼트
		var root = doc.documentElement;
		
		// select box 초기화
		document.getElementById("addrResult").innerHTML = "";
		
		
		// 루트 엘리먼트의 모든 『<item>』엘리먼트 반환받기
		var itemList = root.getElementsByTagName("item");
		
		// 검색 결과 확인
		if (itemList.length==0)
		{
			document.getElementById("addrResult").innerHTML = "<option>주소를 입력하세요</option>";
		}
		else
		{
			document.getElementById("addrResult").innerHTML = "<option value='-1'>주소를 선택하세요</option>";
		}
		
		// 검색 결과가 존재할 경우... 반복문을 순환하며 각 데이터 가져오기
		for (var i=0; i <itemList.length; i++)	//-- 수신한 아이템의 갯수만큼 반복 순환
		{
			var zipcode = itemList[i].getElementsByTagName("zipcode")[0];
			var address = itemList[i].getElementsByTagName("address")[0];
			
			// ※ 태그가 가지는 텍스트는
			//    태그의 첫 번째 자식이고
			//    텍스트 노드의 값은
			//    nodeValue 로 가져온다.
			
			var zipcodeText = zipcode.firstChild.nodeValue;
			var addressText = address.firstChild.nodeValue;
			
			// select box 에 아이템 추가
			document.getElementById("addrResult").innerHTML 
				+= "<option value='"+zipcodeText + "/" + addressText 
				+"'>["+zipcodeText+"] "+addressText+"</option>";
			
		}

	}// end callBakc2()
	
	// 검색된 주소 항목에 대한 선택이 이루어졌을 때 호출되는 함수
	/*//-- 내 풀이
	function selectZipCode()
	{
		//확인
		//alert("선택 확인");
		
		var addrStr = document.getElementById("addrResult").value;
		var arr = addrStr.split("/");
		
		document.getElementById("addr1").value = arr[0];
		document.getElementById("addr2").value = arr[1];
	}
	 */
	function selectZipCode(sel)
	{
		//확인
		//alert("선택 확인");
		
		//확인
		//alert(sel.value);
		
		if (sel.value!="-1") //-- 선택하세요 클릭시 예외처리
		{
			//확인
			//alert(sel.value);
			//--==>> 03992/서울특별시 마포구 동교로 171 (동교동, 아람빌딩)

			document.getElementById("addr1").value = sel.value.split("/")[0];
			document.getElementById("addr2").value = sel.value.split("/")[1];
			document.getElementById("addr3").focus();	//-- 상세주소 입력하도록 focus 주기
		}
	}
</script>
</head>

<body>

<div>
	<h1>회원 가입</h1>
	<p>- 우편번호 검색</p>		
	<p>- ※ url → http://localhost:3306/AjaxApp/test04.action</p>
	<p>- 		→ http://localhost:3306/AjaxApp/test04_ok.action</p>
	<hr>
</div>

<table class="table">
	<tr>
		<th>아이디</th>
		<td>
			<input type="text" id="id" class="control">
			<input type="button" value="중복검사" class="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="control">(테스트)
		</td>
	</tr>
	
	<tr>
		<th>주소</th>
		<td>
			<input type="text" id="addr" class="control" placeholder="동 입력">
			<input type="button" value="검색하기" class="control" onclick="search()">
			<br>
			<!-- <select id="addrResult" class="control"> -->
			<select id="addrResult" class="control" onchange="selectZipCode(this)">
				<option>주소를 입력하세요</option>
			</select>
		</td>
	</tr>
	
	<tr>
		<th>주소 검색 결과</th>
		<td>
			 <input type="text" id="addr1" class="control" readonly="readonly"
			 style="width: 200px;">
			 <br>
			 <input type="text" id="addr2" class="control" readonly="readonly"
			 style="width: 400px;">
			 <br>
			 <input type="text" id="addr3" class="control" placeholder="상세주소를 입력하세요"
			 style="width: 400px;">
		</td>
	</tr>
	
	<tr>
		<th>기타 등등</th>
		<td>
			<input type="text" id="etc" class="control">(테스트)
		</td>
	</tr>
	
</table>

</body>
</html>

ZipCodeDTO.java (상동)

Test04.java

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test04
extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		String view = "AjaxTest04.jsp";
		//String view = "WEB-INF/view/AajxTest04.jsp";
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(view);
		dispatcher.forward(request, response);
	}
	
}

Test04_ok.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;

public class Test04_ok  extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		// 한글 깨짐 방지
		request.setCharacterEncoding("UTF-8");
		
		// 데이터 수신 (AjaxTest04.jsp 로부터 동 이름(addr)수신 )
		String addr = request.getParameter("addr");

		// ※ 여기서도 마찬가지로 우편번호 DB 가 있다고 가정하고
		//    ArrayList 로 직접 DB 구성
		ArrayList<ZipCodeDTO> lists = new ArrayList<ZipCodeDTO>();
		
		if (addr.indexOf("서교")>-1)	// 서교라는 문자가 addr 안에 있다면
		{
			//lists.add(ZipCodeDTO객체);
			//lists.add(new ZipCodeDTO(zipCode, address));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 13 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 17 (서교동, 용성빌딩)"));
			lists.add(new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 18 (서교동)"));
			lists.add(new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 20 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-3 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-4 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 21-6 (서교동)"));
			lists.add(new ZipCodeDTO("04044","서울특별시 마포구 독막로3길 23 (서교동)"));
			lists.add(new ZipCodeDTO("04047","서울특별시 마포구 독막로3길 24 (서교동)"));
			
		}
		else if (addr.indexOf("동교")>-1)
		{
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 171 (동교동, 아람빌딩)"));
			lists.add(new ZipCodeDTO("03995","서울특별시 마포구 동교로 172 (동교동)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 173 (동교동)"));
			lists.add(new ZipCodeDTO("03995","서울특별시 마포구 동교로 174 (동교동)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 175 (동교동)"));
			lists.add(new ZipCodeDTO("03995","서울특별시 마포구 동교로 176 (동교동, 청휘빌딩)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 177 (동교동, 동교동빌딩)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 177-1 (동교동, 동교동빌딩)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 179 (동교동)"));
			lists.add(new ZipCodeDTO("03992","서울특별시 마포구 동교로 179-5 (동교동)"));


		}
		else if (addr.indexOf("연희")>-1)
		{
			lists.add(new ZipCodeDTO("03696","서울특별시 서대문구 가좌로 15 (연희동, 연궁아파트)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-5 (연희동, 해마루)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-6 (연희동)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-7 (연희동, 연희궁빌라)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-9 (연희동)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-11 (연희동)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-13 (연희동)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-14 (연희동, 주함하우스)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-15 (연희동)"));
			lists.add(new ZipCodeDTO("03661","서울특별시 서대문구 가좌로 16-16 (연희동, 구립연희어린이집)"));

		}
		
		request.setAttribute("lists", lists);
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("Test04_ok.jsp");
		dispatcher.forward(request, response);
	}
	
}

Test04_ok.jsp
** ArrayList 를 넘겨 받는 경우 -> XML 기반 처리 사용**
즉, responseXML 사용

※ XML 의 특징
1. <?xml version="1.0" encoding="UTF-8"?>
- 해당문서가 XML 이라고 설명하는 한 줄 (**필수구성)

2. 모든 엘리먼트를 감싸는 엘리먼트 (rootElement , 루트엘리먼트)가 반드시 필수적
- web.xml 을 수정할 때도 이 때문에 </web-app> 끝나기 전에 추가 작업한 것

++ html 에서는 tag 가 이미 정해져있으나
xml 에서는 구조를 잡는 것(구분을하기 위한)에 특화되어있는 것으로
사전에 약속되어있는 element 들이 정의가 되어있는 것이 아니다.
다만, well-formed XML (잘 만든 xml) 부터 기본 문법된 xml 이 있고, 그냥 파일에 xml 확장자만 붙은 xml 이 있다..
xml 은 엄밀히 말하면 단독으로 존재할 수가 없고, 해당 xml (xml 안의 태그 )의 설명서 같은 존재가 필요하다.

ex) 저 xml 은
루트 엘리먼트는 xxxxx
루트 엘리먼트의 하위엘리먼트는 item, xxx, yyy...
...
item 엘리먼트의 속성은 id, pw .....

XML 이 갖는 특성 상
1번 구문 앞에 공백이나 개행이 들어있으면 절대 안됨
--> 그래서 개행이 없게 처리하기 위해서
해당 문서 문번호 1~19 번 사이의 <%@ %><%@ %>- 와 같이 다 붙여 쓰는 형태로 만들어줘야함

<%@ 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();
	
	//check 
	response.setContentType("text/xml");
	//-- AJAX 객체에 데이터를 돌려줄 때
	//   브라우저가 이 데이터를 XML 로 인식해야 하기 때문에
	//   MIME 타입을 XML 로 선언한다.
	//------------ 최면 걸기~
	
	// ※ (수신해서 처리해야 하는) 데이터가 단일 데이터가 아닐 경우
	//    XML 이나 JSON 과 같이 구조화시킬 수 있는 데이터의 형태로 전달하는 것이 처리과정에서 용이하다.
	//    우편번호에 대한 검색 결과는 당연히 다량의 데이터를 전송해야하기 때문에
	//    텍스트가 아닌 XML 형태로 반환하려고 하는 것이다. 
	
%><?xml version="1.0" encoding="UTF-8"?> 
<list>
	<c:forEach var="item" items="${lists}">
		<item>
			<zipcode>${item.zipCode }</zipcode>
			<address>${item.address }</address>
		</item>
	</c:forEach>
</list>

<%-- 문번호 19번은 html 을 그릴 것이 아니고 xml 문서일 것을 표시 --%>
<%-- 태그 내에서 jsp 문법 전부 사용 가능 --%>

<%-- 현재는 XML 객체를 구성한 것이 아니라 서블릿에게 XML 처럼 보이게 만든 것 --%>

728x90

저작자표시 비영리 변경금지

'SsY' 카테고리의 다른 글

[Spring] 004. AOP 의 관찰 (2) : AOP Advice (0)	2023.06.29
[Spring] 003. AOP 의 개요 (0)	2023.06.28
[Spring] 002. 관찰 실습(2) : DB연동, Oracle 암호화/복호화 (0)	2023.06.27
[Spring] 001. Spring Framework 개요 (0)	2023.06.23
[AJAX] 001. AJAX 의 개요 (0)	2023.06.14

ABOUT ME

Planet for Coding

'SsY' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'SsY' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바