结构：

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;

	}

}

　　结果截图：

Ajax聊天的更多相关文章

  1. PHP+ajax聊天室源码！支持长轮循跟定时请求两种

      var lastID = "1";//声明上次取回的消息的ID var isposted = false; var mGetTime;//设置setTimeout的返回值 // ...

  2. WebForm+一般处理程序+Ajax聊天

    #### 很容易理解 插入数据 到数据库 在使用 setInterval() 读取数据 显示在 页面中 好了 不废话 直接上代码 不会的 可以加我 微信 Jth11163## 效果图片 ![在这里插入 ...

  3. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

  4. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

  5. 《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用

    第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...

  6. Python（九）Tornado web 框架

    一.简介 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过 ...

  7. Json学习笔记

    一．昨天内容回顾 创建ajax对象 a) 主流浏览器  new  XMLHttpRequest(); b) IE浏览器  new ActiveXObject("Msxml2.XMLHTTP. ...

  8. Tornado web 框架

    Tornado web 框架 其实很简单.深度应用 一.简介 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像we ...

  9. 100本最棒的web前端图书推荐

    前端技术,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书边码代码,这个是学习编程必须的过程,因为你看一百遍,还不如自己写一遍,写一遍,第一可以加印象,第二便于更好的理解. 熟 ...

随机推荐

  1. 图像开发的p2s模式：halcon+opencv的联动

    [<zw版·Halcon与delphi系列原创教程> 图像开发的p2s模式:halcon+opencv的联动 尽管halcon功能强大,基本上cv只是halcon的一个子集,不过cv毕竟是 ...

  2. GUI生成exe文件

    gui如何生成exe文件: 已经有gui.m和gui.fig文件 1 安装编译器.已经安装好了vs10的. 2 设置编译器.在matlab命令行输入mex -setup,选择安装的c编译器 3 调用编 ...

  3. Linux:-拷贝或传送文件的技巧

    <---拷贝目录如何做到排除文件?常用命令cp,用法比较LOW---> tar -cf - ./* --exclude="nohup.out" | (cd /opt/ ...

  4. Linux 我的笔记

    /home/wangteng/workspace zsh  缩短路径名

  5. Netsuite Formula > Oracle函数列表速查(PL/SQL单行函数和组函数详解).txt

    PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序.在SQL中Oracle内建了一系列函数,这些函数都可被称为SQL或PL/SQL语句,函数主要分为两大类: 单行函数 ...

  6. 设计一个泛型类orderedCollection

    设计一个泛型类orderedCollection,它存储的Comparable对象的集合(在数组中),以及该集合的当前大小.提供public方法isEmpty,makeEmpty,insert,rem ...

  7. sql-将字符串按指定字符分割插入指定表中

    CREATE PROC SPLIT( @STR VARCHAR(MAX), --截取字符串 ), --截取字符 ) --存放表名 ) AS BEGIN ) IF(OBJECT_ID(@TABLE) I ...

  8. python re模块

    re模块主要用于查找.替换.分割 print(re.__doc__) 特殊字符(元字符): "." 任意一个字符,除换行符(\n) "^" 字符串开头 &quo ...

  9. Android Button上的文字自动变成大写，如何解决呢？

    android:textAllCaps="false"手动添加这一行,就不会有烦恼了.

  10. Solr内置的字段类型

    字段类型在org.apache.solr.schema包下 Class 描述 BCDIntField 二进制整形字段 BCDLongField 二进制长整形字段 BCDStrField 二进制字符型字 ...