Ajax聊天
结构：
index.html
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function firstRead() {
createXMLHttpRequest();
xmlHttp.open("post", "servlet/ChatServlet", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post 传参必须有form表单和此句
xmlHttp.onreadystatechange = onReadyState;
xmlHttp.send(null);
window.setTimeout(firstRead, 1000);
}
function sendMsg(){
createXMLHttpRequest();
xmlHttp.open("post", "servlet/ChatServlet", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post 传参必须有form表单和此句
xmlHttp.onreadystatechange = onReadyState;
var chatMsg = document.getElementById("chatInfo");
xmlHttp.send("chatMsg="+chatMsg.value);
//document.getElementById("showChat").innerText = chatMsg;
document.getElementById("chatInfo").value= "";//清空文本框
}
function onReadyState() { //onreadystatechangem 每次状态改变被调用
if (xmlHttp.readyState == 4){//==4 客户端与服务器交互完成,,, ==200是否传输成功.,
if(xmlHttp.status == 200){
//alert("服务器返回: " + xmlHttp.responseText);//responseText 返回服务器数据
document.getElementById("showChat").innerText = xmlHttp.responseText;
}
}
}
function getKeyCode(){
if(window.event.keyCode == 13){//回车键
sendMsg();
}
}
</script>
</head>
<body onload="firstRead()" onkeydown="getKeyCode()">
<form action="" enctype="application/x-www-form-urlencoded">
This is my HTML page. <br>
<div>
<textarea rows="20" cols="60" id="showChat" readonly="readonly"></textarea><br>
<input type="text" id="chatInfo" style="width:300px;height:25px">
<input type="button" value=" 发送 " onclick="sendMsg()">
</div>
</form>
</body>
</html>
ChatServlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class ChatServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String chatMsg = request.getParameter("chatMsg");
ChatService chatService = ChatService.getChat();
if(null!=chatMsg && chatMsg.trim().length()>0){
chatService.addMsg(chatMsg, request.getRemoteAddr());
String getMsg = chatService.getMsg();
out.print(getMsg);
}else{
String getMsg = chatService.getMsg();
out.print(getMsg);
}
}
}
ChatService
import java.util.LinkedList;
public class ChatService {
private static ChatService chat;
private LinkedList<String> list;
private ChatService(){}
public static ChatService getChat(){
if(chat==null){
chat = new ChatService();
}
return chat;
}
public void addMsg(String Msg,String uname){
if(list==null){
list = new LinkedList<String>();
}
if(list.size()>10){
list.removeFirst();
}
list.add(uname+"说:"+Msg);
}
public String getMsg(){
String Msg = "";
if(list!=null){
for (String str:list) {
Msg+=(str+"\n");
}
}
return Msg;
}
}
结果截图：
