Ajax实现在线聊天

呵呵 虽说题目是在线聊天,不过因为时间的原因,所以部分代码没有完善,不过如果把如下代码看懂的话,我相信实现在线聊天对你来说将会轻而易举,一起来看看吧。

html代码:

<%@ 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>
<base href="<%="http://" + request.getServerName() + ":"
					+ request.getServerPort() + request.getRequestURI()%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/md5.js""></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/talk.js"></script>
<title>Ajax</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="1" align="center" cellpadding="4" cellspacing="0"
	bordercolor="#000000" style="border-collapse: collapse">
	<tr bgcolor="#f7f7f7">
		<td colspan="3"> </td>
	</tr>
	<tr bgcolor="#f7f7f7">
		<td>username:</td>
		<td><input type="text" id="username" name="username" /></td>
		<td><span id="usernameresut">请输入用户名。</span></td>
	</tr>
	<tr bgcolor="#f7f7f7">
		<td>password:</td>
		<td><input type="password" id="password" name="password">
		</td>
		<td> </td>
	</tr>
	<tr bgcolor="#f7f7f7" align="center">
		<td colspan="3"><input type="submit" value="登录" id="submit">
		</td>
	</tr>
</table>

<div align="center">
  <p>
    <textarea rows="20" cols="50" id="info"></textarea>
  </p>
  <p> 
    输入内容:
      <input type="text" id="lang" value="" size="33" />
    <input type="button" value="发言"
	id="talk"
	style="font-family: 宋体; font-size: 9pt; color: #ffffff; background-color: #999900; border-width: 1pt; border-color: black; border-style: solid; CURSOR: hand">
  </p>
</div>

</div>
</body>
</html>


JS代码

window.onload = iniPage;

// 初始化页面
function iniPage() {
	document.getElementById("username").onblur = checkusername;
	document.getElementById("submit").disabled = true;
	document.getElementById("talk").onclick = submitInfo;
	document.getElementById("talk").οnkeypress= submitInfo;
	$("#info").readOnly = true;
	username.focus();
	username.select();
	// 每隔1s执行一次函数
	token = setInterval(add, 1000);

}
// 检验用户名是否存在
function checkusername() {
	request = createRequest();
	var username = document.getElementById("username");

	var password = document.getElementById("password");

	if (request == null) {
		alert("error");
	} else {
		var url = "CheckUsername.action?username=" + escape(username.value)
				+ "&password=" + hex_md5(escape(password.value));
		request.onreadystatechange = callback;
		request.open("GET", url, true);
		request.send(null);
	}
}
// 创建返回函数
function callback() {
	if (request.readyState == 4) {
		if (request.status == 200) {
			document.getElementById("submit").disabled = false;
			document.getElementById("usernameresut").innerHTML = request.responseText;
		} else {
			document.getElementById("submit").disabled = true;
		}

	}
}

// 仿在线聊天功能.......多线程异步执行
function add() {
	// 重数据库读取消息向文本域中追加消息

	// $("#info").append("admin:" + info + "\r");

	// 设置文本域每次追加焦点在最下方
	var scrollTop = $("#info")[0].scrollHeight;
	$("#info").scrollTop(scrollTop);
	// 取消计时刷新
	// token.cleraInterval();
}

// 发消息并录入数据库
function submitInfo() {
	// 向文本域中追加消息
	info = document.getElementById("lang");
	if ((info != null) && (info != "")) {
		$("#info").append("admin:" + info.value + "\r");
		// 设置文本域每次追加焦点在最下方
		var scrollTop = $("#info")[0].scrollHeight;
		$("#info").scrollTop(scrollTop);
		info.value="";
	}
}

Action代码

package com.action;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.dao.GetUserName;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class CheckUsernameAction extends ActionSupport {
	private String username ; 
	private String password;
	GetUserName geuusername ; 
	public String execute() throws Exception {
		geuusername = new GetUserName();
		ActionContext context = ActionContext.getContext();  
		Boolean result = geuusername.checkUserName(username);
		HttpServletResponse response = ServletActionContext.getResponse() ; 
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		
		if(result==true){	
				writer.write("用户名已存在!");			
		}else{
			writer.write("恭喜,此名可用");
		}
		return null;
	}

	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public GetUserName getGeuusername() {
		return geuusername;
	}
	public void setGeuusername(GetUserName geuusername) {
		this.geuusername = geuusername;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	

}
这个简化点,大家参考参考吧。

发布了47 篇原创文章 · 获赞 0 · 访问量 27万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章