数据库采用mysql，字段为id(int),username(varchar),message(text),inserTime(datetime)
客户端JSP：
<script type="text/javascript">
$(function(){
$("#timestamp").val(""); //这里必须要把 timestamp 设为空，否则刷新页面后会还缓存着以前的值。
run();
var interval;
function run() {
interval = setInterval(chat, "10000"); //定时器，每10秒取服务器取一次
}
function chat() { // 去服务器后台取得新的聊天记录
$.ajax({
type:"POST", //请求方式
url:"chatAction.do", //请求路径
cache: false,
data:"timestamp="+$("#timestamp").val(),
dataType: "text", //返回值类型
success:function(xml){
$("#timestamp").val($("timestamp",xml).text());
$(xml).find("chat").each(function(i){
$("#chat").append($(this).children("username").text());
$("#chat").append(":");
$("#chat").append($(this).children("message").text());
$("#chat").append("</br>");
})
}
});
}
$("[name=save]").click(function(){ // 保存聊天记录
$.ajax({
type:"POST", //请求方式
url:"chatAction.do", //请求路径
cache: false,
data:$("#form1").serialize(),//传参
dataType: "text" //返回值类型
});
})
$("#closeChat").click(function(){ // 关闭定时器
clearTimeout(interval);
})
});
</script>
<body>
聊天室
<table border="1" height="300" width="500"><tr><td><span id="chat"></span></td></tr>
</table>
<br>
<form id="form1" type="post" action="">
姓 名:<input name="username" type="text">
信 息:<input name="message" type="text">
<input id="timestamp" name="timestamp" type="hidden" value=""/>
<input name="save" type="button" value="提交">
</form>
<input id="closeChat" type="button" value="关闭"/>
</body>
后台服务器端JAVA：
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String username = req.getParameter("username");
String message = req.getParameter("message");
String timestamp = req.getParameter("timestamp");
System.out.println(username);
System.out.println(message);
System.out.println(timestamp);
if(timestamp==null||timestamp.equals("")){ //表示是第一次进入聊天页面或者点刷新后，这时传来的timestamp会是空的，要查询在此前10秒的聊天记录
Date date = new Date();
date.setSeconds(date.getSeconds()-10);
timestamp = format.format(date);
}
if(username!=null&&!username.equals("")){
Chat chat = new Chat();
chat.setUsername(username);
chat.setMessage(message);
chat.setInsertTime(format.parse(format.format(new Date())));
chatService.saveChatMessage(chat);
}
else{
Date time = format.parse(timestamp);
List list = chatService.getChatMessage(timestamp); // 得到聊天记录的list
time.setSeconds(time.getSeconds()+10); // 把时间+10秒后传回给客户端
res.setContentType("text/html;charset=UTF-8"); //必须有，否则会乱码
PrintWriter out = res.getWriter();
StringBuffer s = new StringBuffer();
s.append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
s.append("<chatAll>");
s.append("<timestamp>"+format.format(time)+"</timestamp>");
for(int i=0;i<list.size();i++){
Chat c = (Chat)list.get(i);
s.append("<chat><username>"+c.getUsername()+"</username><message>"+c.getMessage()+"</message></chat>");
}
s.append("</chatAll>");
System.out.println(s);
out.print(s);
}
return null;
分享到：
相关推荐
基于Ajax聊天室的设计与分析 论文 对于写论文的同学有一定的帮助
【基于AJAX的聊天室】 在互联网应用中，实时交互性是提高用户体验的关键因素之一，而基于AJAX（Asynchronous JavaScript and XML）的聊天室就是这样一种实现方式。AJAX允许网页在不刷新整个页面的情况下与服务器...
【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用，它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页...
Asp.Net基于Ajax的无刷新聊天室,可以带来以下两点好处： ·页面实时更新，无需完全刷新页面； ·聊天内容更新时，只需要读取最新的聊天信息，做到“按需取数据”。 本项目将会实现以个基于Ajax的无刷新聊天室，其...
【基于AJAX的无刷新聊天室】是一种利用Ajax技术实现的实时交互聊天系统，它无需用户手动刷新页面就能即时更新聊天内容，提升了用户体验。在Web 2.0时代，AJAX（Asynchronous JavaScript and XML）成为了构建动态、...
基于jQuery的Ajax聊天室应用 在当今网络技术日益普及的时代，人们通过网络进行交流的方式变得多样化。网络聊天室便是其中之一，满足了网络中多人同时聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便...
【基于AJAX的简易聊天室】是一个利用现代Web技术实现的实时交互平台，它整合了AJAX、JSP、Servlet和MySQL数据库等关键技术，旨在提供一个简洁高效的在线沟通环境。AJAX（Asynchronous JavaScript and XML）是核心，...
【phpAJAX聊天室】是一种基于PHP和AJAX技术实现的在线实时交流平台。这个聊天室系统能够让用户无需刷新页面就能进行实时的消息传递，提供了一种高效、便捷的沟通方式。接下来，我们将深入探讨该系统的构成及其核心...
在本项目"基于Ajax的无刷新聊天室"中，我们将看到Ajax如何被用来构建一个实时、流畅的在线交流平台。 **关键知识点** 1. **Ajax原理**：Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器向服务器发送异步...
最近利用闲暇时间，作了个简单的聊天室，该聊天室使用 prototype.js (v1.4) 类库，主要应用Ajax技术、Application变量，做到小型架构，页面无刷新，[b]无数据库[/b]，能查看在线用户等特点。 <br>刚开始打算用...
【基于Ajax的简单聊天室】是一种使用Ajax技术构建的实时通信平台，允许用户在不刷新整个页面的情况下进行交互。Ajax，全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），是Web开发中的一个术语，它...
【Ajax聊天室】是一个基于Java Web技术实现的简单交互式应用，主要利用了Servlet、JSP和Ajax技术。这个小例子展示了如何通过Ajax实现在不刷新整个页面的情况下更新内容，提供了一个基本的在线聊天功能。 1. **...
【基于Ajax的Web聊天室】是一个使用Ajax技术构建的在线实时通信系统，它允许用户无需刷新页面即可进行实时聊天。Ajax（Asynchronous JavaScript and XML）的核心在于通过JavaScript异步地与服务器交换数据并更新部分...
基于ajax无刷新asp聊天室 功能/特点 基于Ajax技术 运用了成熟稳定的prototype/scriptaculous框架 数据传送量小 页面嵌入聊天 自定义强突出个性化 支持换肤 支持表情 支持拖动 放大 更改颜色
总结来说，基于Ajax的聊天室利用了JSP和Servlet的结合，通过Ajax技术实现了无刷新的动态交互，提供了良好的用户体验。在设计和实现过程中，需要注意安全性和性能优化，确保聊天室功能的稳定和用户友好。
**基于Ajax的无刷新聊天室** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，为用户提供更快速、流畅的...
【标题】"无数据库的基于Ajax技术的PHP聊天室"是一种实现在线实时交流的应用程序，它巧妙地利用了Ajax（Asynchronous JavaScript and XML）技术，实现了用户无需刷新页面即可进行实时交互的效果。在这个系统中，PHP...
【jsp+ajax聊天室】是一个基于JavaServer Pages (JSP) 和 Asynchronous JavaScript and XML (AJAX) 技术构建的简易在线交流平台。在这个项目中，开发者利用JSP作为后端服务器端脚本语言，处理用户交互和数据管理，而...
**基于Ajax技术的聊天室实现** 在Web开发中，实时交互和无刷新更新用户体验是现代网页设计的关键要素。Ajax（Asynchronous JavaScript and XML）技术的出现，极大地改善了这一情况。Ajax并非一种单一的技术，而是一...