15일차 1 - Ajax 제시어 기능 DB이용 & JQuery
제시어 기능 DB이용하는것으로 수정해보자.
먼저 search TABLE만들고 데이터 넣어..
--제시어 기능 구현
create table search (
keyword varchar2(50) not null
);
insert into search values('JAVA');
insert into search values('JAVA SE');
insert into search values('JAVA MOBILE');
insert into search values('JAVA ANDROID');
insert into search values('JAVA BEANS');
insert into search values('JAVA AA');
insert into search values('JAVA BE');
insert into search values('JAVA CAR');
insert into search values('JAVA DEVIL');
insert into search values('JAVA DEATH');
insert into search values('JAVA SUN');
insert into search values('JAVA SUNNY');
insert into search values('자바 우왕굳');
insert into search values('자바 우왕굳이다');
insert into search values('자바 공부');
insert into search values('자바 공부열심히');
insert into search values('자바 공구리');
insert into search values('자바 우아아아');
commit
select * from search;
suggest.jsp 수정하고
<%@page import="ajax.Suggest"%>
<%@ page language="java" contentType="text/plain; charset=UTF-8" %>
<%@ page import="java.util.List" %>
<%
String keyword = request.getParameter("keyword");
Suggest suggest = new Suggest();
List<String> keywordList = suggest.search(keyword);
//plain타입이니까 출력(out.print)하면 데이터값으로 넘어가
out.print(keywordList.size());
out.print("|");
for (int i = 0 ; i < keywordList.size() ; i++) {
String key = (String)keywordList.get(i);
out.print(key);
if (i < keywordList.size() - 1) {
out.print(",");
}
}
%>
ajax package만들고 /webdev/src/ajax/Suggest class만들고
package ajax;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class Suggest {
public List<String> search(String keyword) {
if (keyword == null || keyword.equals("")) return null;
keyword = keyword.toUpperCase();
List<String> list = new ArrayList<String>();
Connection cn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
Class.forName("oracle.jdbc.OracleDriver");
cn = DriverManager.getConnection(
"jdbc:oracle:thin:@localhost:1521:xe", "oraclejava", "oraclejava");
String sql =
"SELECT keyword FROM search " +
"WHERE keyword LIKE ? ORDER BY keyword ASC ";
ps = cn.prepareStatement(sql);
ps.setString(1, keyword+'%');
rs = ps.executeQuery();
while (rs.next()){
list.add(rs.getString("keyword"));
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) try { rs.close(); } catch(Exception e) {}
if (ps != null) try { ps.close(); } catch(Exception e) {}
if (cn != null) try { cn.close(); } catch(Exception e) {}
}
return list;
}
}
ajax 에 대해 쭉 알아봤어..
화면 리플레쉬없이 데이터 받아올때..
ex)화면가입시 아이디검사..
.
.
.
.
.
.
.
제시어 기능을 jQuery로 바꿔볼거야..
jQuery, Java Script 같은 Client script는 client에서 UI를 편하게 하기 위해 사용하는 경우가 대부분이지. (최근에 Node.js 같은 경우 서버단에서의 페이징 기술을 JSP나 ASP가 따로 필요없이 Java Script만으로 사용하기도 한다. 아직 많이 안 알려졌지.)
jQuery를 사용하려면
실제 서버에서 돌리려면 Production버전으로 받고, 개발시에는 에러나는 위치등을 상세히 보고자할 때에는 Development버전받아.
그리고 jQuery를 다른데서도 계속 불러다 쓸 수 있게 하기 위해 WebContent에 폴더(jquery)를 하나 만들고 다운받은 js파일(jquery-1.7.2.js)를 집어넣어놔.
jQuery WIKIPEDIA http://ko.wikipedia.org/wiki/JQuery
jQuery는 javascript library야. 처음은 ‘존 레식’이라는 프로그래머가 개인적으로 만든 라이브러리를 사람들이 써보고 좋아라 하다가 빠르게 퍼졌어.
아쉬운 것은 플러그인(http://plugins.jquery.com/) 개발중이라고 막힌거야. 좋은거 많았어.
WebContent밑에 jquerytest01폴더 만들고
먼저 javascript로 한번 작성해보고 그걸 jQuery로 바꾸면서 얼마나 간단해지는지 살펴보자.
test 01 – 글자를 클릭하면 사라지게 하기.
먼저 javascript 사용해서 구현해보자.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function disappear(elem) {
elem.style.display="none";
}
</script>
</head>
<body>
<table>
<tr>
<td onclick=javascript:disappear(this);>1. 클릭하면 사라집니다.</td>
</tr>
<tr>
<td onclick=javascript:disappear(this);>2. 클릭하면 사라집니다.</td>
</tr>
<tr>
<td onclick=javascript:disappear(this);>3. 클릭하면 사라집니다.</td>
</tr>
<tr>
<td onclick=javascript:disappear(this);>4. 클릭하면 사라집니다.</td>
</tr>
</table>
</body>
</html>
이 방법은 좋지 않아. 왜냐하면 client script담당하는 프로그래머와 디자이너가 같은 파일로 작업하는건 불편해. 그래서 서버단에서 MVC로 나누어 처리하듯이 클라이언트단도 또 MVC나눠야지.
client
- M(model) : XML
- V(view) : html/css
- C(control) : javascript, jQuery
위의 코드는 html과 control단이 같이 있잖아. javascript를 html에서 분리해주는게 좋아. 먼저 분리해볼까.
js01.js파일 만들어
function init() {
var elementTd = document.getElementsByTagName("td");
//td값을 다 한꺼번에 읽어와
for (var i=0; i<elementTd.length; i++) {
var elem = elementTd.item(i);
//elementTd의 아이템을 하나씩 꺼내와
//onclick이벤트가 들어오면 자기자신을 안보이게
elem.onclick = function() {
this.style.display = "none";
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 파일분리 --> <script type="text/javascript" src="js01.js"> </script> </head> <body onload="javascript:init();"><!-- 아직완전분리는 안됐네 --> <table> <tr> <td>1. 클릭하면 사라집니다.</td> </tr> <tr> <td>2. 클릭하면 사라집니다.</td> </tr> <tr> <td>3. 클릭하면 사라집니다.</td> </tr> <tr> <td>4. 클릭하면 사라집니다.</td> </tr> </table> </body> </html>
아직 단점이 있어. body tag에 onload로 javascript:init()을 수행하라고 걸어줘야해. 아직 완전히 분리된게 아니지. 게다가 onload는 body가 다 읽힌 다음에 실행되기 때문에 만약 패킷문제가 생긴다거나 했을 경우 실행이 안될 수 있어. 동작이 불안정하지.
이제 jQuery로 바꿔보자구.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 파일분리 --> <script type="text/javascript" src="../jquery/jquery-1.7.2.js"></script> <script type="text/javascript" src="js01.js"></script> </head> <body> <table> <tr> <td>1. 클릭하면 사라집니다.</td> </tr> <tr> <td>2. 클릭하면 사라집니다.</td> </tr> <tr> <td>3. 클릭하면 사라집니다.</td> </tr> <tr> <td>4. 클릭하면 사라집니다.</td> </tr> </table> </body> </html>
//$() : 현재 내 문서
$(function(){ //현재 내 문서안에서 function()실행
$("td").click(function(){ //td에 전부 click이벤트 걸어서 function을 수행
$(this).hide();
});
});
아까와 똑같이 동작하지만 소스는 완전히 분리되고 간결하기까지..
.