自制超简单JQuery AJAX聊天室

最新推荐文章于 2018-07-21 12:35:03 发布

iteye_7592

最新推荐文章于 2018-07-21 12:35:03 发布

阅读量732

点赞数

分类专栏： js & ajax & css & html 文章标签： Ajax jQuery JSP HTML Spring ViewUI

js & ajax & css & html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

:D 上午无聊，做着玩玩。
不要鄙视我哟。哈哈

源码如下：
一共三个jsp

index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>聊天室</title>
<script type="text/javascript" src="jquery-1.2.5.pack.js"></script>
</head>
<body>
<div id="content" style="font-size: 12px;overflow-y:auto ;height: 300px;width: 300px;border: 1px solid #CCC;padding: 10px;float: left;"></div>
<div id="member" style="overflow-y:auto ;height: 300px;width: 100px;border: 1px solid #CCC;padding: 10px;"></div>


<textarea rows="5" cols="35" id="say"></textarea><br/><input onclick="send();" type="button" value="发送"/>
<script type="text/javascript">

function inChat(){
$.ajax({
  type: "POST",
  url: "member.jsp",
  success: function(msg){
  getMember();
  }
});
}

function send(){
$.ajax({
  type: "POST",
  url: "content.jsp",
  data: "say="+$("#say").val(),
  success: function(msg){
  getContent();
  $("#say").val("");
  }
});

}
getContent();
getMember();
window.setInterval(function(){getContent();getMember();},3000);


function getContent(){
$.ajax({
  type: "POST",
  url: "content.jsp",
  success: function(msg){
  $("#content").html(msg);
  }
});
}

function getMember(){
$.ajax({
  type: "POST",
  url: "member.jsp",
  success: function(msg){
  $("#member").html(msg);
  }
});
}
</script>
</body>
</html>

member.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
if(application.getAttribute("member")==null)
	application.setAttribute("member",new java.util.HashSet());

java.util.Set member=(java.util.Set)application.getAttribute("member");
member.add(request.getRemoteAddr());
%>

<% for(Object o:member){%>
<%=o%><br/>
<%}%>

content.jsp


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
if(application.getAttribute("content")==null)application.setAttribute("content","");
%>
<%
if(request.getParameter("say")!=null)
application.setAttribute("content",application.getAttribute("content")+"<br/>"+request.getRemoteAddr()+": "+request.getParameter("say"));
%>
<%=application.getAttribute("content")%>

把这三个页面和jquery-1.2.5.pack.js包放在WebContent下就可以了，有乱码问题的话加个编码过滤器就可以了。

我在web.xml里面加了spring现成的过滤器 :D


	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>
			org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
	</filter-mapping>