💫 AjaxTest05 (추천 검색어)
# web.xml, Test05Send.java 코드 생략!
# 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="css/main.css">
<style type="text/css">
#search
{
width: 500px;
}
#list
{
border: 1px solid gray;
width: 500px;
position: absolute;
left: 70px;
top: 134px;
font-weight: bold;
color: #343;
display: none;
}
#list.item
{
padding: 2px;
}
#list #footer
{
height: 14px;
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()
{
var search = document.getElementById("search").value;
// 여기 코드는 서버 전송 전 유효성 검사!
// ① 입력한 검색어가 존재할 경우에만 검색 키워드 서버 전송할 수 있도록 처리
if (search.replace(" ","") == "") // 공백을 다 제거한 후에도 빈 문자열일 경우
{
document.getElementById("list").style.display = "none";
return;
}
// ② 입력된 검색어가 완성형 한글일 경우에만 검색 키워드 서버 전송할 수 있도록 처리
// → 정규표현식 사용
var regEx = /^[가-힣]{1,}$/;
// test : 정규표현식 검사하는 메소드, 정규표현식에 부합하면 true / 그렇지 않으면 false
if(!regEx.test(search))
{
return;
}
//-------------------------------------------------- 유효성 검사 끝~!
var url = "test05.do?search="+search;
ajax = createAjax();
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
callBack();
};
ajax.send("");
}
function callBack()
{
var doc = ajax.responseXML;
var root = doc.documentElement;
var itemList = root.getElementsByTagName("item");
document.getElementById("items").innerHTML = "";
for (var i=0; i<itemList.length; i++)
{
var word = itemList[i].firstChild.nodeValue;
document.getElementById("items").innerHTML
+= "<div class='item'>" + word + "</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>
<div id="footer">
추천 검색어
</div>
</div>
</body>
</html>➰체크할 내용➰
- 전체적으로는 주소 처리 방식과 비슷해서 큰 어려움은 없었지만 정규표현식!은 따로 공부해보기✔
# Test05.java
- DB 사용하지 않고 ArrayList에 키워드 저장하고 기능 구현해보기
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
request.setCharacterEncoding("UTF-8");
String search = request.getParameter("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("가방끈"));
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");
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>${item.word }</item>
</c:forEach>
</list>
