Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[Ajax] 20231227 [프로그램소스] 본문
AjaxApp
ZipCodeDTO.java (우편번호, 주소 객체 JavaBean)
/*=======================
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" version="3.1">
<display-name>AjaxApp</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 관련 실습 -->
<!-- AjaxTest04 → 우편번호 검색 -->
<servlet>
<servlet-name>test04send</servlet-name>
<servlet-class>com.test.ajax.Test04Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test04send</servlet-name>
<url-pattern>/test04send.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>test04</servlet-name>
<servlet-class>com.test.ajax.Test04</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test04</servlet-name>
<url-pattern>/test04.do</url-pattern>
</servlet-mapping>
</web-app>
Test04Send.java
/*========================
Test04Send.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;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class Test04Send extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 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 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
String view = "WEB-INF/view/AjaxTest04.jsp";
//String view = "AjaxTest04.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
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
{
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()
{
var id = document.getElementById("id").value;
var url = "test03.do?id=" + id;
ajax = createAjax(); //-- ajax.js
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
callBack();
};
ajax.send("");
}
function callBack()
{
var data = ajax.responseText;
data = parseInt(data);
if (data==0)
{
document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
}
else
{
document.getElementById("result").innerText = "이미 사용중인 아이디입니다.";
}
}
//===============================================================================
// 데이터 수집 → URL 준비 → AJAX 객체 → open("전송방식", "URL", boolean)
// → ajax.onreadystatechange(readyState==4 && status==200) → send("") GET방식;
//===============================================================================
function search()
{
// 확인
//alert("함수 호출~!!!");
// 데이터 수집
var addr = document.getElementById("addr").value;
// URL 준비
var url = "test04.do?addr=" + addr;
// AJAX 객체(→ XMLHttpRequest 객체) 생성
ajax = createAjax();
// 설정
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
{
// 수행 업무
callBack2();
}
};
ajax.send("");
}
// 추출된 수행 업무
// → 우편번호 검색 결과를 통보받아
// 사용자에게 안내해 줄 수 있도록 처리
function callBack2()
{
//var data = ajax.responseText;
// XML 문서 전체의 참조 객체. (흔히... XML 문서 객체라고 한다.)
var doc = ajax.responseXML;
// XML 문서의 최상위 엘리먼트(루트 엘리먼트)
//-- 현재는... 『<list></list>』 엘리먼트
var root = doc.documentElement;
// 모든 『<item></item>』 엘리먼트 반환받기
var itemList = root.getElementsByTagName("item");
// select box 초기화
document.getElementById("addrResult").innerHTML = "";
// 검색 결과 확인
if (itemList.length==0)
{
document.getElementById("addrResult").innerHTML
= "<option>주소를 입력하세요.</option>";
}
else
{
document.getElementById("addrResult").innerHTML
= "<option value='0'>주소를 선택하세요.</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 에 아이템(<option></option>) 추가
document.getElementById("addrResult").innerHTML
+= "<option value='" + zipcodeText + "/" + addressText
+ "'>[" + zipcodeText + "] " + addressText + "</option>";
// 여기서 추가해 준 HTML 구문을 모두 합쳐보면...
// 【<option value='zipcodeText/addressText'>[zipcodeText] addressText</option>】
// 옵션값이 설정되면...
// 우편 번호는 주소 검색 결과 첫 번째 창
// 주소 문자는 두 번째 창에 입력되도록.
}
}
// 내 풀이 ㅎㅎ
function select()
{
//alert("함수 호출~!!!");
var str = document.getElementById("addrResult").value;
//======================================
// [substr(start, end) 이용한 풀이]
//======================================
//var zipcode = str.substr(0, 5);
//var address = str.substr(6);
//======================================
//====================================================
// [substr(start, end)] &
// [indexOf("찾을 문자열") 이용한 풀이]
//====================================================
//var zipcode = str.substr(0, (str.indexOf("/")));
//var address = str.substr((str.indexOf("/"))+1);
//====================================================
//======================================
// [split("구분자") 이용한 풀이]
//======================================
//var strList = str.split("/");
//var zipcode = strList[0];
//var address = strList[1];
//======================================
var addr1 = document.getElementById("addr1");
var addr2 = document.getElementById("addr2");
var addr3 = document.getElementById("addr3");
addr1.value = zipcode;
addr2.value = address;
addr3.focus();
}
// 쌤 풀이~!!!
function selectZipCode(sel)
{
// 확인
//alert("함수 호출~!!!");
// 확인
//alert(sel.value);
//--==>> zipcodeText/addressText 가 넘어온다!
//***********************************************************
// [sel.value]
//***********************************************************
// 04048/서울특별시 마포구 독막로7길 34 (서교동, 서교빌딩)
//***********************************************************
// 문자열을 "/" 기준으로 잘라서 문자열 배열로 만든 후 그 요소를 변수에 저장.
//sel.value.split("/");
/*
// 04048/서울특별시 마포구 독막로7길 34 (서교동, 서교빌딩)
document.getElementById("addr1").value = sel.value.split("/")[0];
document.getElementById("addr2").value = sel.value.split("/")[1];
document.getElementById("addr3").focus();
*/
//===========================================================================
// 주소를 선택하세요를 선택했을 때도... 위의 처리를 하므로
// 선택하세요 일 때 value="0"을 준다.
// value가 "0"이 아닐 때만 주소 검색 결과 창에 뿌려주는 처리를 하는 것이다.
//===========================================================================
if (sel.value != "0")
{
document.getElementById("addr1").value = sel.value.split("/")[0];
document.getElementById("addr2").value = sel.value.split("/")[1];
document.getElementById("addr3").focus();
}
}
</script>
</head>
<body>
<div>
<h1>회원 가입</h1>
<p>우편번호 검색</p>
<br>
</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>
</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" placeholder="동 입력">
<input type="button" value="검색하기" class="btn control" onclick="search()">
<br>
<!-- <select id="addrResult" class="control" onchange="select()"> -->
<select id="addrResult" class="control" onchange="selectZipCode(this)">
<option>주소를 입력하세요.</option>
</select>
</td>
</tr>
<tr>
<th>주소 검색 결과</th>
<td>
<input type="text" id="addr1" class="txt control" readonly="readonly"
style="width: 100px;">
<br>
<input type="text" id="addr2" class="txt control" readonly="readonly"
style="width: 500px;">
<br>
<input type="text" id="addr3" class="txt control" placeholder="상세주소를 입력하세요."
style="width: 500px;">
<br>
</td>
</tr>
</table>
</body>
</html>
Test04.java
/*========================
Test04.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 Test04 extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 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 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 한글 깨짐 방지 처리
request.setCharacterEncoding("UTF-8");
// 이전 페이지(AjaxTest04.jsp)로부터 넘어온 데이터 수신
// → addr
String addr = request.getParameter("addr");
// ※ 여기서도 마찬가지로 우편번호 데이터베이스가 있다고 가정하고...
// 대신 직접 자료구조(ArrayList) 구성
ArrayList<ZipCodeDTO> db = new ArrayList<ZipCodeDTO>();
if (addr.indexOf("서교") > -1)
{
db.add(new ZipCodeDTO("04047", "서울특별시 마포구 독막로3길 40 (서교동, 서교동다세대주택)"));
db.add(new ZipCodeDTO("04048", "서울특별시 마포구 독막로7길 34 (서교동, 서교빌딩)"));
db.add(new ZipCodeDTO("04029", "서울특별시 마포구 동교로 116 (서교동, 서교동교회)"));
db.add(new ZipCodeDTO("04030", "서울특별시 마포구 동교로 144-9 (서교동, 서교빌라)"));
db.add(new ZipCodeDTO("04031", "서울특별시 마포구 동교로 162-6 (서교동, 서교동다세대빌라)"));
db.add(new ZipCodeDTO("04035", "서울특별시 마포구 동교로12길 41-12 (서교동, 서교마임)"));
}
else if (addr.indexOf("연남") > -1)
{
db.add(new ZipCodeDTO("03984", "서울특별시 마포구 동교로 241 (연남동, 연남파크빌딩)"));
db.add(new ZipCodeDTO("03983", "서울특별시 마포구 동교로 263-6 (연남동, 연남동주택)"));
db.add(new ZipCodeDTO("03980", "서울특별시 마포구 동교로 273-20 (연남동, 연남빌라)"));
db.add(new ZipCodeDTO("03990", "서울특별시 마포구 동교로27길 44-5 (연남동, 연남원룸)"));
db.add(new ZipCodeDTO("03983", "서울특별시 마포구 동교로41길 36 (연남동, 연남동주민커뮤니티센터)"));
db.add(new ZipCodeDTO("03984", "서울특별시 마포구 동교로41길 41 (연남동, 연남동41빌딩)"));
db.add(new ZipCodeDTO("03983", "서울특별시 마포구 동교로45길 30 (연남동, 연남동주택)"));
db.add(new ZipCodeDTO("03983", "서울특별시 마포구 동교로47길 26 (연남동, 연남동고깔집)"));
}
else if (addr.indexOf("망원") > -1)
{
db.add(new ZipCodeDTO("04019", "서울특별시 마포구 동교로8안길 23 (합정동, 망원정)"));
db.add(new ZipCodeDTO("03954", "서울특별시 마포구 마포나루길 386 (망원동, 망원한강수영장)"));
db.add(new ZipCodeDTO("03954", "서울특별시 마포구 마포나루길 407 (망원동, 망원2호)"));
db.add(new ZipCodeDTO("04085", "서울특별시 마포구 마포나루길 594 (합정동, 망원수상훈련장)"));
db.add(new ZipCodeDTO("04006", "서울특별시 마포구 망원로 12 (망원동, 망원아트빌라)"));
db.add(new ZipCodeDTO("04007", "서울특별시 마포구 망원로 28 (망원동, 망원1-1공영주차장)"));
db.add(new ZipCodeDTO("04007", "서울특별시 마포구 망원로 34-15 (망원동, 망원동다세대주택)"));
}
// 다량의 데이터... → XML 로 넘겨야 한다.
request.setAttribute("lists", db);
//RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/Test04_ok.jsp");
RequestDispatcher dispatcher = request.getRequestDispatcher("Test04_ok.jsp");
dispatcher.forward(request, response);
}
}
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();
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// xml 태그 앞에 공백 하나라도 들어가면 인식하지 못하기 때문에
// 스크립트릿과 include 를 꼬리물기로 구성한다.
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// check~!!!
response.setContentType("text/xml");
//-- AJAX 객체에 데이터를 반환할 때
// 브라우저가 이 데이터를 XML 로 인식해야 하기 때문에
// MIME 타입을 XML 로 선언한다.
// ※ (수신해서 처리해야 하는) 데이터가 한 개 이상일 경우...
// XML 이나 JSON 과 같이 구조화시킬 수 있는 데이터의 형태로
// 전달하는 것이 처리 과정에서 용이하다.
// 우편번호에 대한 검색 결과는
// 당연히 다량의 데이터를 전송해야 하기 때문에
// 일반 텍스트가 아닌 XML 형태로 반환하려고 하는 것이다.
// ******************************************************************************
// XML은 구성되는 모든 태그가 태그안에 구성되어야 한다.
// 루트 태그 안에 들어있어야 한다.
// 루트 엘리먼트 하위에 존재해야 한다.
// ******************************************************************************
// <tag> ------------(root Element)
// <other>
// </other>
// </tag>
// ******************************************************************************
%><?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>'[Ajax] > Program source (Ajax)' 카테고리의 다른 글
'[Ajax]/Program source (Ajax)' Related Articles
more
