jQuery는
AJAX와 같은 Javascript의 기능을 사용하기 쉽도록 만들어주는 일종의 Library 입니다.
protype과 같이 잘 알려진 몇가지가 있지만
jQuery는 19KB의 소형이지만 다양한 plugin과 함께 아주 강력한 기능을 제공해 줍니다.
(※ 자세한 정보는 다음 링크 페이지를 참조하세요. ▤)
다음 예제는
jQuery, JSP와 MySQL을 이용한 아주 간단한 채팅 예제 입니다.
앞의 DynamicUpdate 페이지에서 보인
AJAX 기능을 jQuery를 이용하여 간단히 사용자와의 interaction을 강화한 버전이라 할 수 있습니다.
예제는 두 개의 파일로 구성됩니다.
(1) 클라이언트측 AjaxChat.html 파일은 주기적으로 서버에 최근 대화내용을 요청해서 지정된 화면 영역에 추가한다. 또한 사용자의 대화를 서버에 요청하여 저장하도록 합니다.
<html>
<head>
<title>Chat Example in AJAX with jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"><script type="text/javascript" src="/your/path/jquery-1.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
timestamp = 0;
updateMsg();
$("form#chatform").submit(function(){
$.post("/your/path/AjaxChatServer.jsp",{
message: $("#msg").val(),
name: $("#author").val(),
action: "postmsg",
time: timestamp
}, function(xml) {
$("#msg").empty();
addMessages(xml);
});
return false;
});
});
function addMessages(xml) {
if($("status",xml).text() == "2") return;
timestamp = $("time",xml).text();
$("message",xml).each(function(id) {
message = $("message",xml).get(id);
$("#messagewindow").prepend("<b>"+$("author",message).text()+
"</b>: "+$("text",message).text()+
"<br />");
});
}
function updateMsg() {
$.post("/your/path/AjaxChatServer.jsp",{ time: timestamp }, function(xml) {
$("#loading").remove();
addMessages(xml);
});
setTimeout('updateMsg()', 4000);
}
</script>
<style type="text/css">
#messagewindow {
height: 250px;
border: 1px solid;
padding: 5px;
overflow: auto;
}
#wrapper {
margin: auto;
width: 550px;
}
</style>
</head>
<body>
<div id="wrapper">
<p id="messagewindow"><span id="loading">Loading...</span></p>
<form id="chatform">
이름: <input type="text" size="8" id="author" />
메시지: <input type="text" size="45" id="msg" />
<input type="submit" value=" OK " /><br />
</form>
</div>
</body>
</html>
(2) 서버측 AjaxChatServer.jsp 파일은 클라이언트의 대화내용을 건네받아 저장하고 최근 대화내용을 요청한 클라이언트에게 xml 형식으로 저장합니다.
<%@ page contentType="text/html; charset=utf-8" pageEncoding="euc-kr" %>
<%!
/**
* @(#) AjaxChatServer.jsp
*
* Copyright ⓒ 1999-2007 by (c) CheckersLab.com
* All rights reserved.
*
* NOTICE : Refer our copy and redistribution policy guide.
*
* @author Hoyal Kim, hoyal.kim@gmail.com
*
* ---------------------------------------
*
* Script of Creating Table in mySQL
*
CREATE TABLE ajaxchat (
id int NOT NULL auto_increment,
user varchar(255) NOT NULL,
msg text NOT NULL,
time int NOT NULL,
PRIMARY KEY (id)
);
*
*/
%><%@ page import="java.io.*" %>
<%@ page import="java.net.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.MessageFormat" %><%
String action = request.getParameter("action");
if(action == null) action = "";
String timestamp = request.getParameter("time");
if(timestamp == null) timestamp = "0";
String name = request.getParameter("name");
if(name == null) name = "No Name";
String message = request.getParameter("message");
if(message == null) message = "No Message";// Append the message --------------------
if (action.equals("postmsg")) {
String msg_ins = putMessage(name, message);
}// Fetch the recent message ----------------
Vector msgList = getMessage(timestamp);
int status_code = 1;
if(msgList.size() == 0) status_code = 2;// Output the messages -------------------
response.setContentType("text/xml; charset=utf-8");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);
response.setHeader("Cache-Control","no-store");
if (request.getProtocol().equals("HTTP/1.1"))
response.setHeader("Cache-Control", "no-cache");out.println("<?xml version=\"1.0\"?>");
out.println("<response>");
out.println("\t<status>" + status_code + "</status>");
out.println("\t<time>" + System.currentTimeMillis() + "</time>");if(status_code == 1) {
for (int idx = 0; idx < msgList.size(); idx++) {
String msgs[] = split((String) msgList.elementAt(idx), CHAR_DELIM);
out.println("\t<message>");
out.println("\t\t<author>" + msgs[0] + "</author>");
out.println("\t\t<text>" + msgs[1] + "</text>");
out.println("\t</message>");
}
}
out.println("</response>");
%><%!
private final static int NUM_STORE = 10;
private final static int NUM_DISPLAY = 10;
private final static String CHAR_DELIM = "|";private final static String DB_DRIVER = "org.gjt.mm.mysql.Driver";
private final static String DB_URL = "jdbc:mysql://yourhost/dbname";
private final static String DB_USER = "user_id";
private final static String DB_PSWD= "password";private final static String QRY_GET = "SELECT user, msg FROM ajaxchat WHERE time > {0} ORDER BY id ASC";
private final static String QRY_INS = "INSERT INTO ajaxchat (user, msg, time) VALUES (\"{0}\", \"{1}\", {2})";
/**
* 주어진 시간 이후의 메시지를 가져온다.
*/
private Vector getMessage(String timestamp)
{
Vector list = new Vector();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName(DB_DRIVER);
conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PSWD);
stmt = conn.createStatement();
stmt.setMaxRows(NUM_DISPLAY);String msg_data[] = { timestamp };
MessageFormat mf = new MessageFormat(QRY_GET);
String query = mf.format(msg_data);
rs = stmt.executeQuery(query);
while (rs.next()) {
StringBuffer article = new StringBuffer();
article.append(rs.getString("user"));
article.append(CHAR_DELIM);
article.append(rs.getString("msg"));
list.addElement(article.toString());
}
}
catch(Exception ex) {
list.addElement("error|" + ex.toString());
}
finally {
if (rs != null) try { rs.close(); }catch(Exception e){}
if (stmt != null) {
try { stmt.setMaxRows(0); stmt.close(); } catch(Exception e){}
}
if (conn != null) try { conn.close(); } catch(Exception e){}
}
return list;
}/**
* 하나의 문자열을 주어진 구분문자를 기준으로 나누어 문자열의 배열로 변환한다.
*/
public static synchronized String[] split(String str, String delim)
{
Vector v = new Vector();
StringTokenizer tokenizer = new StringTokenizer(str, delim);
while (tokenizer.hasMoreTokens()) {
v.addElement(tokenizer.nextToken());
}
String[] ret = new String[v.size()];
for (int i = 0; i < ret.length; i++) {
ret[i] = (String) v.elementAt(i);
}
return ret;
}/**
* 특정 문자(열)를 지정한 문자(열)로 바꾸어준다.
*/
public static synchronized String replace(String dataStr, String oldStr, String newStr)
{
int index = 0;
StringBuffer sb = new StringBuffer(dataStr);
String buf = sb.toString();
while ( (index = buf.indexOf(oldStr, index) ) >= 0)
{
sb = new StringBuffer(buf.substring(0, index)); // Left
sb.append(newStr); // Replaced String
sb.append(buf.substring(index + oldStr.length())); // Right
buf = sb.toString();
index += newStr.length(); // Next Position
}
return buf;
}/**
* 새로운 행을 추가한다.
*/
private String putMessage(String name, String message)
{
String msg = "";Connection conn = null;
Statement stmt = null;
String query_ins = "";
try {
Class.forName(DB_DRIVER);
conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PSWD);
stmt = conn.createStatement();message = replace(message, "<", "<");
message = replace(message, ">", ">");
String timestamp = System.currentTimeMillis()+"";String msg_data[] = { name, message, timestamp };
MessageFormat mf = new MessageFormat(QRY_INS);
//String
query_ins = mf.format(msg_data);
stmt.executeUpdate(query_ins);
}
catch(Exception ex) {
msg = query_ins; //ex.toString();
}
finally {
if (stmt != null) try { stmt.close(); } catch(Exception e){}
if (conn != null) try { conn.close(); } catch(Exception e){}
}
return msg;
}%>
