结构：

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. 【数学】Jersey Politics

                                                            Jersey Politics Time Limit: 1000MS   Memory ...

  2. hadoop的自定义数据类型和与关系型数据库交互

    最近有一个需求就是在建模的时候,有少部分数据是postgres的,只能读取postgres里面的数据到hadoop里面进行建模测试,而不能导出数据到hdfs上去. 读取postgres里面的数据库有两 ...

  3. for in for of

    for  in   循环的是下标 for  of  循环的是value let arr = [3, 5, 7]; arr.foo = "hello"; for (let i in ...

  4. [译]Dynamics AX 2012 R2 BI系列-规划分析的注意事项

    https://msdn.microsoft.com/en-us/library/gg731898.aspx       在开始实施AX的分析特性前,有很多事情要考虑.本文描述了你必须考虑的事情,和在 ...

  5. Centos7上启动vpn客户端失败问题处理

    在某台云主机上(Centos7)搭建vpn客户端,发现一直启动失败,检查了下日志,报错如下: Sat Jan :: WARNING: Your certificate is not yet valid ...

  6. 老电脑如果从windows7升级到windows10不断重启进不了系统，还是想用windows10，怎么办？

    先说一下我的配置:08年的acer aspire 5520g,很老的电脑,除了内存加到4g,其他都不变.官方只支持到windows7,并且官方说明该型号不在官方支持windows10之列. 之前win ...

  7. Eclipse 的快捷键以及文档注释、多行注释的快捷键

    一.多行注释快捷键 1.选中你要加注释的区域,用ctrl+shift+C 或者ctrl+/ 会加上//注释2.先把你要注释的东西选中,用shit+ctrl+/ 会加上/*    */注释 3.以上快捷 ...

  8. CSS3样式

    1.边框 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-radi ...

  9. com.opensymphony.xwork2.ognl.OgnlValueStack] - target is null for setProperty(null, "emailTypeNo", [Ljava.lang.String;@6f205e]

    情况1,查询结果未转换为与前台交互的实体类DTO 实体类:EmailTypeDto package com.manage.email.dto; public class EmailTypeDto { ...

  10. 图说函数模板右值引用参数(T&&)类型推导规则（C++11）

    见下图: 规律总结: 只要我们传递一个基本类型是A④的左值,那么,传递后,T的类型就是A&,形参在函数体中的类型就是A&. 只要我们传递一个基本类型是A的右值,那么,传递后,T的类型就 ...