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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章