Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[Ajax] 20231227 [프로그램소스] - ajax.js, web.xml, WordDTO, Test05Send, AjaxTest05, Test05, Test05_ok 본문
[Ajax]/Program source (Ajax)
[Ajax] 20231227 [프로그램소스] - ajax.js, web.xml, WordDTO, Test05Send, AjaxTest05, Test05, Test05_ok
Jelly-fish 2024. 1. 4. 01:29
012
AjaxApp
ajax.js
/**
* ajax.js
*/
var ajax = null;
// AJAX 객체(→ XMLHttpRequest 객체) 생성 함수
function createAjax()
{
/*
// ActiveXObject 를 지원하는 브라우저라면...
if (window.ActiveXObject) //-- IE 7 이전
{
//return new ActiveXObject("Microsoft.XMLHTTP");
return new ActiveXObject("Msxml2.XMLHTTP");
//-- 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라.
// (ActiveXObject 객체 → XMLHttpRequest 객체를 대신할 수 있는 객체)
}
else //-- 그 외 브라우저
{
if (window.XMLHttpRequest) //-- XMLHttpRequest 객체 지원 브라우저
{
return new XMLHttpRequest();
//-- 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라.
}
else //-- AJAX 를 지원하지 않는 브라우저
{
return null;
//-- AJAX 사용할 수 없으므로 null 을 반환해라.
}
}
*/
/*
if (window.ActiveXObject)
return new ActiveXObject("Msxml2.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else
return null;
*/
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else
return null;
}
WordDTO.java
/*===================
WordDTO.java
=====================*/
package com.test.ajax;
public class WordDTO
{
// 주요 속성 구성
private String word;
// 기본 생성자 추가 구성
public WordDTO()
{
this("");
}
// 사용자 정의 생성자 구성
public WordDTO(String word)
{
this.word = word;
}
// getter / setter 구성
public String getWord()
{
return word;
}
public void setWord(String word)
{
this.word = word;
}
}
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 관련 실습 -->
<!-- AjaxTest02 → 페이지 내 컨트롤 확인 -->
<servlet>
<servlet-name>test02send</servlet-name>
<servlet-class>com.test.ajax.Test02Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test02send</servlet-name>
<url-pattern>/test02send.do</url-pattern>
</servlet-mapping>
<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.do</url-pattern>
</servlet-mapping>
<!-- ========================================= -->
<!-- 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>
<!-- ========================================= -->
<!-- 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.xml] -->
<!-- AJAX 관련 실습 -->
<!-- AjaxTest05 → 추천 검색어 처리 -->
<servlet>
<servlet-name>test05send</servlet-name>
<servlet-class>com.test.ajax.Test05Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test05send</servlet-name>
<url-pattern>/test05send.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>test05</servlet-name>
<servlet-class>com.test.ajax.Test05</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test05</servlet-name>
<url-pattern>/test05.do</url-pattern>
</servlet-mapping>
</web-app>
Test05Send.java
/*========================
Test05Send.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 Test05Send 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/AjaxTest05.jsp";
//String view = "AjaxTest05.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
AjaxTest05.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>AjaxTest05.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
#search
{
width: 500px;
}
#list
{
border: 1px solid gray;
width: 502px;
position: absolute;
left: 68px;
top: 134px;
font-weight: bold;
color: #343;
display: none;
}
#list .item
{
padding: 2px;
}
#list #footer
{
height: 12px;
background-color: #DDD;
text-align: right;
padding: 5px;
font-size: 8pt;
}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">
// 검색창에서 키보드 입력이 발생할 때 마다...
// 그 때 까지의 입력된 단어를 서버로 전송하고
// 전송된 단어에 맞는 추천 검색어를 받아올 수 있도록 처리
function search()
{
// 확인
//alert("함수 호출~!!!");
// 데이터 수집(입력된 값 얻어오기)
var search = document.getElementById("search").value;
// 테스트
//alert(search);
// 서버로 전송하기 전에 유효성 검사 --------------------------------
// ① 검색어가 존재할 경우에만 서버로 전송할 수 있도록 처리
if (search.replace(" ", "") == "")
{
document.getElementById("list").style.display = "none";
return;
}
// ② 입력된 검색어가 완성형 한글일 경우에만
// 검색 키워드를 전송할 수 있도록 처리
// → 정규표현식 사용
var regEx = /^[가-힣]{1,}$/;
if (!regEx.test(search))
{
return;
}
// -------------------------------- 서버로 전송하기 전에 유효성 검사
// URL 구성
var url = "test05.do?search=" + search;
// XMLHttpRequest 객체(→ AJAX 객체) 생성
ajax = createAjax();
// 환경 설정
ajax.open("GET", url, true);
//
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
{
// 업무 내용 수행(→ 외부의 함수 호출)
callBack();
}
};
ajax.send("");
}
// 추출된 업무 수행 내용
//-- XML 목록으로 받아온 검색어들을
// 적절한 리스트로 생성해서 화면에 출력할 수 있도록 처리
function callBack()
{
// 컨트롤러 요청
// 컨트롤러에서 자료구조 만들고 ok.jsp로 넘기기
// ok.jsp 를 xml 형식으로 ...
// XML 문서 객체
var doc = ajax.responseXML;
// XML 문서의 최상위 엘리먼트 수신(루트 엘리먼트)
// → 지금은 『<list></list>』인 상황
var root = doc.documentElement;
// 루트 엘리먼트 하위의 모든 『<item></item>』 엘리먼트 반환받기
var itemList = root.getElementsByTagName("item");
// 추천 검색어 출력(노출) 지점 초기화
document.getElementById("items").innerHTML = "";
// 수신한 데이터(추천 검색어) 삽입하기
for (var i = 0; i < itemList.length; i++)
{
var word = itemList[i].firstChild.nodeValue;
// 출력(노출) 지점에 추가 → items
// <div class="item">가습기</div>
document.getElementById("items").innerHTML
+= "<div class='item'>" + word + "</div>";
//var word = itemList[i].getElementsByTagName("word")[0];
//var wordText = word.firstChild.nodeValue;
//document.getElementById("items").innerHTML
// += "<div class='item'>" + wordText + "</div>";
}
// 최종적으로 목록을 화면에 보일 수 있도록 렌더링
document.getElementById("list").style.display = "block";
}
</script>
</head>
<body>
<div>
<h1>AJAX 실습 - 추천 검색어</h1>
<hr>
</div>
<div>
검색어
<input type="text" id="search" class="control"
placeholder="검색어를 입력하세요" onkeyup="search()">
</div>
<div id="list">
<div id="items">
<div class="item">가습기</div>
<div class="item">가요대전</div>
<div class="item">가방</div>
<div class="item">가다랑어</div>
<div class="item">가위</div>
<div class="item">가죽</div>
<div class="item">가족</div>
<div class="item">가지</div>
<div class="item">가평</div>
</div>
<div id="footer">
추천 검색어
</div>
</div>
</body>
</html>
Test05.java
/*========================
Test05.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 Test05 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");
// 이전 페이지(AjaxTest05.jsp)로부터 넘어온 데이터 수신
// → search
String search = request.getParameter("search");
// 테스트
//System.out.println(search);
// DB 연결 및 액션 처리
// ........ WHERE COLUMNNAME LIKE 'search%'; 와 같은 쿼리문 수행
// 그에 따른 결과 수신
// 위에서 처리한 결과를 가지고 있는 자료구조 활용
ArrayList<WordDTO> lists = new ArrayList<WordDTO>();
if (search.equals("가"))
{
lists.add(new WordDTO("가습기"));
lists.add(new WordDTO("가요대전"));
lists.add(new WordDTO("가방"));
lists.add(new WordDTO("가다랑어"));
lists.add(new WordDTO("가위"));
lists.add(new WordDTO("가죽"));
lists.add(new WordDTO("가족"));
lists.add(new WordDTO("가지"));
lists.add(new WordDTO("가평"));
}
else if (search.equals("가습"))
{
lists.add(new WordDTO("가습기 손질"));
lists.add(new WordDTO("가습기 구매"));
lists.add(new WordDTO("가습기 분해"));
lists.add(new WordDTO("가습기 교체"));
lists.add(new WordDTO("가습기 살균제"));
lists.add(new WordDTO("가습기 고장"));
}
else if (search.equals("가방"))
{
lists.add(new WordDTO("가방 손질"));
lists.add(new WordDTO("가방 구매"));
lists.add(new WordDTO("가방 분해"));
lists.add(new WordDTO("가방 교체"));
lists.add(new WordDTO("가방끈"));
lists.add(new WordDTO("가방 나눔"));
}
else if (search.equals("가방끈"))
{
lists.add(new WordDTO("가방끈 매듭"));
lists.add(new WordDTO("가방끈 매듭 묶기"));
lists.add(new WordDTO("가방끈 매듭 푸는 법"));
lists.add(new WordDTO("가방끈 길이 조절"));
lists.add(new WordDTO("가방끈 교체"));
lists.add(new WordDTO("가방끈 색상"));
}
request.setAttribute("lists", lists);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/Test05_ok.jsp");
//RequestDispatcher dispatcher = request.getRequestDispatcher("Test05_ok.jsp");
dispatcher.forward(request, response);
}
}
Test05_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();
response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<%--
<list>
<c:forEach var="item" items="${lists }">
<item>
<word>${item.word }</word>
</item>
</c:forEach>
</list>
--%>
<list>
<c:forEach var="item" items="${lists }">
<item>${item.word }</item>
</c:forEach>
</list>
'[Ajax] > Program source (Ajax)' 카테고리의 다른 글
'[Ajax]/Program source (Ajax)' Related Articles
more
