當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JSP + AJAX 打造簡單聊天室

發布時間：2024/4/11 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JSP + AJAX 打造簡單聊天室小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文代碼下載地址：http://download.csdn.net/source/798197 一個簡單的聊天室程式，但基本包含了簡單的AJAX的使用方法，可以做為簡單的Demo用來學習。整個程式包含三個文件，頁面文件chat.html,後臺處理的Servlet文件Chat.java以及簡單的用戶資料的UserSessionListener.java類。其中chat.html用于接受用戶輸入，並將接收資料傳給後臺Servlet處理，UserSessionListener主要用於登入和登出時用戶列表及提示信息的處理。? chat.html如下： <html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=BIG5"?/>
<title></title>
<script?type="text/javascript">...
var?HttpRequest;
var?url?=?"Chat";
function?getRequest()...{
????if(window.XMLHttpRequest)...{
????????return(new?XMLHttpRequest());
????}else?if(window.ActiveXObject)...{
????????try...{
????????????return(new?ActiveXObject("Msxm12.XMLHTTP"));
????????}catch(e)...{
????????????try...{
????????????????return(new?ActiveXObject("Microsoft.XMLHTTP"));
????????????}catch(e)...{}
????????}
????}
}
function?sendRequest()...{
????if(document.getElementById("txtMessage").value.length<=0)...{
????????return?false;
????}
????HttpRequest?=?getRequest();
????
????//HttpRequest.onreadystatechange?=?getMessage;
????HttpRequest.open("POST",?url,?true);
????HttpRequest.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????var?msg;
????msg?=?"Action=AddMessage&Message="?+?escape(document.getElementById("txtMessage").value);
????HttpRequest.send(msg);
????document.getElementById("txtMessage").value?=?"";
????//document.getElementById("txtMessage").focus();
}
function?DisplayMessage()...{
????if(HttpRequest.readyState?==?4?&&?HttpRequest.status?==?200)...{
????????//alert("abd");
????????//alert(HttpRequest.responseText);
????????var?messages;
????????//alert(HttpRequest.responseText);
????????messages?=?HttpRequest.responseText.split("!@#");
????????//document.writeln(messages[0]);
????????//document.writeln(messages[1]);
????????document.getElementById("Messages").innerHTML?=?messages[0];
????????document.getElementById("userList").innerHTML?=?"User?List?<br>"?+?messages[1];
????????//document.getElementById
????}
}
function?logout()...{
????HttpRequest?=?getRequest();
????HttpRequest.open("POST",?url,?true);
????HttpRequest.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????var?msg;
????
????msg?=?"Action=Logout";
????HttpRequest.send(msg);
}
function?getMessage()...{
????HttpRequest?=?getRequest();
????HttpRequest.onreadystatechange?=?DisplayMessage;
????HttpRequest.open("POST",?url,?true);
????HttpRequest.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????var?msg;
????msg?=?"Action=GetMessage";
????HttpRequest.send(msg);
????document.all.txtMessage.focus();
}
function?login()...{
????HttpRequest?=?getRequest();
????var?WshNetwork?=?new?ActiveXObject("WScript.Network");
????
????HttpRequest.open("POST",?url,?true);
????HttpRequest.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????var?msg;
????msg?=?"Action=Login&UserName="?+?WshNetwork.UserName;
????HttpRequest.send(msg);
????
????setInterval('getMessage();',?1000);
}
function?chkSubmit(e)...{
????if(window.event)...{
????????var?keyNumber?=?e.keyCode;
????????if(keyNumber?==?13)...{
????????????sendRequest();
????????}
????}
}
</script>
</head>
<body?onunload="logout();"?onload="login();">
????<form?action="#"?onsubmit="return?false;">
????<table>
????????<tr?valign="top">
????????????<td?width="400"><div?id="Messages"?style="font-size:9pt;width:800;height:400"></div></td>
????????????<td?width="100"?id="userList"></td>
????????</tr>
????</table>
????<input?type="text"?size="20"?id="txtMessage"?onkeypress="chkSubmit(event);">
????<button?onclick="sendRequest();">Say</button>
????</form>
</body>
</html>
? 用於處理頁面提交信息的Servlet Chat.java代碼如下：
import?java.io.IOException;
import?java.io.PrintWriter;
import?java.text.SimpleDateFormat;
import?java.util.Date;
import?java.util.LinkedList;
import?javax.servlet.ServletContext;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?moon.UserSessionListener;
/**?*//**
?*?Servlet?implementation?class?for?Servlet:?Chat
?*?
?*/
public?class?Chat?extends?javax.servlet.http.HttpServlet?implements
??javax.servlet.Servlet?...{
?static?final?long?serialVersionUID?=?1L;
?private?String?userName?=?"";
?/**//*
??*?(non-Java-doc)
??*?
??*?@see?javax.servlet.http.HttpServlet#HttpServlet()
??*/
?public?Chat()?...{
??super();
?}
?private?String?getNow()...{
??Date?date?=?new?Date();
??SimpleDateFormat?df?=?new?SimpleDateFormat("yyyy/MM/dd?HH:mm:ss");
??return?df.format(date);??
?}
?
?/**//*
??*?(non-Java-doc)
??*?
??*?@see?javax.servlet.http.HttpServlet#doGet(HttpServletRequest?request,
??*??????HttpServletResponse?response)
??*/
?@SuppressWarnings("unchecked")
?protected?void?doGet(HttpServletRequest?request,
???HttpServletResponse?response)?throws?ServletException,?IOException?...{
??String?action?=?request.getParameter("Action");
??if?(action?==?null)?...{
??}?else?if?(action.equals("GetMessage"))?...{
???PrintWriter?out?=?response.getWriter();
???out.print(getMessages()?+?"!@#"?+?getOnlineUsers());
??}?else?if?(action.equals("AddMessage"))?...{
???String?message?=?request.getParameter("Message");
???userName?=?((UserSessionListener)?request.getSession()
?????.getAttribute("UserName")).toString();
???addMessage(getNow()?+?"?"?+?userName?+?"?Says:?"?+?message);
??}else?if(action.equals("Logout"))...{
???request.getSession().removeAttribute("UserName");
??}else?if(action.equals("Login"))...{
???request.getSession().setAttribute("UserName",?new?UserSessionListener(request.getParameter("UserName")));
??}
??//?TODO?Auto-generated?method?stub
?}
?/**//*
??*?(non-Java-doc)
??*?
??*?@see?javax.servlet.http.HttpServlet#doPost(HttpServletRequest?request,
??*??????HttpServletResponse?response)
??*/
?protected?void?doPost(HttpServletRequest?request,
???HttpServletResponse?response)?throws?ServletException,?IOException?...{
??doGet(request,?response);
??//?TODO?Auto-generated?method?stub
?}
?@SuppressWarnings("unchecked")
?private?String?getMessages()?...{
??String?result?=?null;
??ServletContext?application?=?getServletContext();
??LinkedList<String>?messages?=?(LinkedList<String>)?application
????.getAttribute("ChatMessage");
??if?(messages?==?null)?...{
???result?=?"";
??}?else?...{
???StringBuilder?sb?=?new?StringBuilder("");
???for?(String?tmp?:?messages)?...{
????sb.append(tmp);
????sb.append("<br>");
???}
???result?=?sb.toString();
??}
??return?result;
?}
?@SuppressWarnings("unchecked")
?private?String?getOnlineUsers()?...{
??String?result;
??LinkedList<String>?onlineUsers?=?(LinkedList<String>)getServletContext().getAttribute("UserList");
??if?(onlineUsers?==?null)?...{
???result?=?"";
??}?else?...{
???StringBuilder?users?=?new?StringBuilder("");
???for?(String?tmp?:?onlineUsers)?...{
????users.append(tmp);
????users.append("<br>");
???}
???result?=?users.toString();
??}
??return?result;
?}
?@SuppressWarnings("unchecked")
?private?void?addMessage(String?message)?...{
??ServletContext?application?=?getServletContext();
??synchronized?(application)?...{
???LinkedList<String>?messages?=?(LinkedList<String>)?application
?????.getAttribute("ChatMessage");
???if?(messages?==?null)?...{
????messages?=?new?LinkedList<String>();
???}
???if?(messages.size()?>?30)?...{
????messages.removeFirst();
???}
???messages.add(message);
???application.setAttribute("ChatMessage",?messages);
??}
?}
?public?void?destroy()?...{
??super.destroy();
?}
}
? 用于做用戶登陸，登出處理類UserSessionListener代碼如下： import?javax.servlet.ServletContext;
import?javax.servlet.http.HttpSessionBindingEvent;
import?javax.servlet.http.HttpSessionBindingListener;
import?java.text.SimpleDateFormat;
import?java.util.Date;
import?java.util.LinkedList;
public?class?UserSessionListener?implements?HttpSessionBindingListener?...{
?private?String?userName;
?public?UserSessionListener(String?userName)?...{
??super();
??this.userName?=?userName;
?}
?
?private?String?getNow()...{
??Date?date?=?new?Date();
??SimpleDateFormat?df?=?new?SimpleDateFormat("yyyy/MM/dd?HH:mm:ss");
??return?df.format(date);??
?}
?@SuppressWarnings("unchecked")
?public?void?valueBound(HttpSessionBindingEvent?arg0)?...{
??//?TODO?Auto-generated?method?stub
??arg0.getSession().setMaxInactiveInterval(120);
??ServletContext?application?=?arg0.getSession().getServletContext();
??synchronized?(application)?...{
???LinkedList<String>?userList?=?(LinkedList<String>)?application
?????.getAttribute("UserList");
???if?(userList?==?null)?...{
????userList?=?new?LinkedList<String>();
???}
???userList.add(userName);
???application.setAttribute("UserList",?userList);
???LinkedList<String>?messages?=?(LinkedList<String>)?application
?????.getAttribute("ChatMessage");
???if?(messages?==?null)?...{
????messages?=?new?LinkedList<String>();
???}
???messages.add(getNow()?+?"?"?+??userName?+?"?Login...");
???application.setAttribute("ChatMessage",?messages);
??}
?}
?@SuppressWarnings("unchecked")
?public?void?valueUnbound(HttpSessionBindingEvent?arg0)?...{
??//?TODO?Auto-generated?method?stub
??ServletContext?application?=?arg0.getSession().getServletContext();
??synchronized?(application)?...{
???LinkedList<String>?userList?=?(LinkedList<String>)?application
?????.getAttribute("UserList");
???userList.remove(userName);
???application.setAttribute("UserList",?userList);
???LinkedList<String>?messages?=?(LinkedList<String>)?application
?????.getAttribute("ChatMessage");
???if?(messages?==?null)?...{
????messages?=?new?LinkedList<String>();
???}
???messages.add(getNow()?+?"?"?+?userName?+?"?Logout...");
???application.setAttribute("ChatMessage",?messages);
??}
?}
?/**?*//**
??*?@return?the?userName
??*/
?public?String?getUserName()?...{
??return?userName;
?}
?/**?*//**
??*?@param?userName
??*????????????the?userName?to?set
??*/
?public?void?setUserName(String?userName)?...{
??this.userName?=?userName;
?}
?public?String?toString()?...{
??return?this.userName;
?}
}
其中UserSessionListener類實現了HttpSessionBingdingListener接口，以便于在用戶登入和登出時實現用戶列表的更新。?

轉載于:https://www.cnblogs.com/moonsnow/archive/2007/09/12/6226920.html

總結

以上是生活随笔為你收集整理的JSP + AJAX 打造簡單聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：万事开头容易
下一篇： javascript中函数的全解简介