|
【Login.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/user.js" charset="utf-8"></script>
</head>
<body onload="chageWindowSize()">
<center>
<h2>欢迎登录飞Q聊天室</h2>
<form action="/AjaxQQ2018/LoginChuLiServlet" method="post">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
<input type="submit" value="开始登录"/>
<input type="reset" value="重新输入"/>
</form>
</center>
</body>
</html>
【FriendList.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'friendlist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript" src="js/ajaxutils.js"></script>
</head>
<body onload="chageWindowSize()">
<h2>好友列表</h2>
<ul>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">张三</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">李四</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">王五</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">刘能</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">10010</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">10011</li>
<%
for (int i = 10000; i < 10100; i++) {
%>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan"><%=i%></li>
<%
}
%>
</ul>
</body>
</html>
【chatroom.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'chatroom.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/ajaxutils.js" charset="utf-8"></script>
<script type="text/javascript" src="js/user.js" charset="utf-8"></script>
</head>
<body>
<center>
<h2>
飞Q聊天室(用户<font color="blue" face="consolas"><span id="sender"><%=session.getAttribute("username")%></span></font>正在和好友<font
color=red face="华文新魏"><span id="getter"><%=request.getAttribute("name")%></span></font>聊天)
</h2>
<textarea rows="20" cols="40" id="cons" style="font-family: '华文新魏'; font-size: 20px;"></textarea>
<br> <input type="text" id="content" size=40 /><input
type="button" value="发送信息" onclick="sendMessage()" />
</center>
</body>
</html>
【LoginChuLiservlet.java】
package com.ajax.controller;
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;
import javax.servlet.http.HttpSession;
public class LoginChuLiServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String newName = new String(username.getBytes("iso-8859-1"), "utf-8");
String password = request.getParameter("password");
if ("123456".equals(password))
{
HttpSession session = request.getSession();
session.setAttribute("username", newName);
session.setMaxInactiveInterval(1000*60*5);
request.getRequestDispatcher("/WEB-INF/user/friendlist.jsp").forward(request, response);
}
else
{
request.getRequestDispatcher("/WEB-INF/user/login.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【SendMessageServlet.java】
package com.ajax.controller;
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;
import com.ajax.service.MessageService;
public class SendMessageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
// 用于处理发送信息
// 1.接受信息
// [注意window.open()会以get方式提交数据， Ajax默认是以post方式提交数据]
String sender = (String) request.getSession().getAttribute("username");
String getter = request.getParameter("getter");
String newGetter = new String(getter.getBytes("iso-8859-1"), "utf-8");
String content = request.getParameter("con");
String newContent = new String(content.getBytes("iso-8859-1"), "utf-8");
System.out.println("sender: " + sender + " getter: " + newGetter
+ " content: " + newContent);
// 开始添加
MessageService mService = new MessageService();
if (mService.addMessage(sender, newGetter, newContent)) {
System.out.println("本条消息记录数据添加成功！！！");
// 以XML数据格式返回
// out.println("<mes><sender></getter></mes>");
out.println(newContent + " (本条消息记录数据发送成功！！！)");
}
// 去出去了就把数据库设置为已经取出
//mService.setGetZero(sender, getter);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【GetMessageServlet.java】
package com.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.jms.Message;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ajax.service.MessageService;
public class GetMessageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String sender = (String) request.getSession().getAttribute("username");
String getter = request.getParameter("sender");
// .getBytes("iso-8859-1"), "utf-8"
String newSender = "";
if (sender != null) {
newSender = new String(sender.getBytes("iso-8859-1"),
"utf-8");
}
System.out.println("接收数据人: 接受者" + getter + " 发送者： " + sender);
// 取出数据
MessageService mService = new MessageService();
String messageInfo = mService.getMessage(newSender, getter);
response.setDateHeader("Expires", -1);
// 把信息返回出去
out.println(messageInfo);
//信息如果发出去就置为0
//mService.setGetZero(newSender, getter);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【GoChatRoomServlet.java】
package com.ajax.controller;
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;
public class GoChatRoomServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String newName = new String(name.getBytes("iso-8859-1"), "utf-8");
System.out.println(""+name+" "+"1"+newName+"1");
request.setAttribute("name", newName);
request.getRequestDispatcher("/WEB-INF/user/chatroom.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【Man
ageService.java】
package com.ajax.service;
import com.ajax.dao.SqlHelper;
import java.sql.*;
public class MessageService {
// 定义一个全局变量，
用于及时返回用户聊天信息
private static String message = "";
public boolean addMessage(String sender, String getter, String content) {
boolean b = true;
System.out.println("insert.getParameter:" + sender + " " + getter + " "
+ content);
String sql = "insert into messages (sender, getter, content) values ('"
+ sender + "', '" + getter + "', '" + content + "')";
try {
SqlHelper.executeUpdate(sql, null);
} catch (Exception e) {
b = false;
// TODO: handle exception
e.printStackTrace();
}
return b;
}
// 取出数据, 把数据组织好返回给客户端
public String getMessage(String sender, String getter) {
// 进来的时候把信息清空
message = "";
System.out.println("SQL: sender" + sender + " getter: " + getter);
String sql = "select * from messages where (getter = '" + sender
+ "' and sender='" + getter + "') and isGet=0";
ResultSet rs = SqlHelper.executeQuery(sql, null);
System.out.println("select sql: " + sql);
// xml格式
// String messageInfo =
// "<mess><messid>1</messid><sender>001</sender><getter>002</getter><con>hello</con><time>20170201</time></mess>";
String messageInfo = "<mess>";
try {
while (rs.next()) {
System.out.println("rs.next info:");
String messid = rs.getObject(1).toString();
String con = rs.getObject(4).toString();
String time = rs.getObject(5).toString();
System.out.println(messid + " " + con + " " + time);
messageInfo += "<messid>" + messid + "</messid><sender>"
+ sender + "</sender><getter>" + getter
+ "</getter><con>" + con + "</con><time>" + time
+ "</time>";
}
messageInfo += "</mess>";
System.out.println("messageInfo: " + messageInfo);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
SqlHelper.close(rs, SqlHelper.getPs(), SqlHelper.getCt());
}
// 把信息返回出去
message = messageInfo;
//如果message中没有信息，
说明isGet=1
//如果message中有信息，说明isGet=0
System.out.println("message is: "+message);
//<mess></mess>
if (message.equals("<mess></mess>") || message.equals("")){
//isGet=1
System.out.println("-----------------------------我没有拿到数据");
}
else{
//信息走到这里说明信息我已经拿到手了，（不用管其他的）
System.out.println("-----------------------------我已经查到数据");
//this.setGetZero(sender, getter);
// 取完之后设置为1
//[特别重要：
注意这里的SQL更新语句的sender和getter是给接受者看的，
与上面的SQL语句刚好相反]
sql = "update messages set isGet = 1 where sender = '" + getter
+ "' and getter='" + sender + "'"; //ok
//sql = "update messages set isGet = 1 where sender = '" + getter
//+ "' and getter='" + sender + "'"; //error
System.out.println("update sql: " + sql);
SqlHelper.executeUpdate(sql, null);
}
return messageInfo;（上面的修改操作并不会影响到这里已经拿到的messageInfo）
}
}
【user.js】
function change1(val, obj) {
if (val == 'over') {
obj.style.color = "red";
obj.style.cursor = "hand";
} else if (val == 'out') {
obj.style.color = "black";
}
}
function chageWindowSize() {
// window.alert("12");
window.resizeTo(400, 700);
window.moveTo(400, 190);
}
var getterName = "";
function openChatRoom(obj) {
// window.alert("open new window");
// 默认是get方式提交, encodeURI(obj.innerText)是使用URI编码
window.open("/AjaxQQ2018/GoChatRoomServlet?name="
+ encodeURI(obj.innerText) + "", "_blank");
getterName = obj.innerText;
// window.alert(getterName);
}
var mXmlHttpRequest = "";
// 接受信息者（只要这个函数上线了，
就说明信息接收了）
function getMessage() {
mXmlHttpRequest = getXmlHttpRequest();
if (mXmlHttpRequest != null) {
var url = "/AjaxQQ2018/GetMessageServlet";
var data = "sender=" + $("getter").innerText;
// window.alert($("getter").innerText+" "+data);
mXmlHttpRequest.open("post", url, true);
mXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定处理结果的函数
mXmlHttpRequest.onreadystatechange = function chuli() {
if (mXmlHttpRequest.readyState == 4
&& mXmlHttpRequest.status == 200) {
// 得到返回信息
var message = mXmlHttpRequest.responseXML;
// window.alert(message);
//<mess><messid>71</messid><sender>10011</sender><getter>10010</getter><con>nihoa</con><time>2017-07-31 10:00:24.0</time><messid>72</messid><sender>10011</sender><getter>10010</getter><con>12121212</con><time>2017-07-31 10:01:11.0</time><messid>73</messid><sender>10011</sender><getter>10010</getter><con>12121212</con><time>2017-07-31 10:01:23.0</time><messid>74</messid><sender>10011</sender><getter>10010</getter><con>haha</con><time>2017-07-31 10:04:15.0</time><messid>75</messid><sender>10011</sender><getter>10010</getter><con>121212</con><time>2017-07-31 10:05:06.0</time></mess>
var cons = message.getElementsByTagName("con");
var time = message.getElementsByTagName("time");
// window.alert(cons+" "+time);
//window.alert(cons.length+" "+time.length);
if (cons.length != 0) {
for (var i = 0; i < cons.length; i++) {
var getter = $("getter").innerText;
var sender =$("sender").innerText;
//window.alert(getter+" "+sender);
// window.alert("get: "+getter+" sen:"+sender);
// xx 对 yy 说
//注意在JavaScript中不能出现String, int 等数据类型，
所有的数据都用var表示
//生成时间：new Date().toLocaleString()
$("cons").style.color = "blue";
var con = time[i].childNodes[0].nodeValue+" "+getter+" said to "+sender+" :"+ cons[i].childNodes[0].nodeValue;
//利用"\r\n接收一条数据就换行显示"
$("cons").value += con+"\r\n";
//window.alert(con);
//$("content").innerText = "";
}
}
}
};
// window.alert(data);
// window.alert(url);
mXmlHttpRequest.send(data);
}
}
// 开始不断读取数据
// 使用定时器， 5s一次
window.setInterval("getMessage()", 5000);
// 发送信息者
function sendMessage() {
// 发送信息
mXmlHttpRequest = getXmlHttpRequest();
if (mXmlHttpRequest != null) {
var url = "/AjaxQQ2018/SendMessageServlet";
var data = "con=" + $("content").value + "&getter="
+ $("getter").innerText;
// window.alert(url+" "+data);
mXmlHttpRequest.open("post", url, true);
mXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定回调函数
mXmlHttpRequest.onreadystatechange = function chuli() {
if (mXmlHttpRequest.readyState == 4
&& mXmlHttpRequest.status == 200) {
// 得到返回信息
var con = mXmlHttpRequest.responseText;
//window.alert(con);
$("cons").style.color="red";
$("cons").value = new Date().toLocaleString()+" You have said to "+$("getter").innerText+" :"+con;
$("content").innerText = "";
}
};
// 正式发送请求
mXmlHttpRequest.send(data);
}
}
| 
【Ajax入门技术】如何设置请求头 体 ，利用ajax进行取消请求数据操作，解决重复请求问题，请求超时网络异常以及获取json数据
Ajax技术详解（上）
【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术
