结构：

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. 【原创】Android ExpandableListView使用

    ExpandableView的使用可以绑定到SimpleExpandableListAdapter,主要是看这个Adapter怎么用. 这个类默认的构造函数有9个参数, 很好地解释了什么叫做又臭又长. ...

  2. 数据绑定控件之Repeater

    引言 前几篇的文章在说AJAX的内容,利用AJAX技术能够开发出高效运行的网站应用程序,不过在进行B/S项目开发时只拥有AJAX技术是远远不够的,踏入到B/S要学的东西会更多,但相较C/S的复杂逻辑结 ...

  3. python与ruby的差别

    1.引用文件差别 Ruby:同一目录下的文件,如/usr/local/ruby/foo.rb与/usr/local/ruby/bar.rb两个文件.如果直接在foo.rb中 require 'bar' ...

  4. WebBrowser内核指定

    一.背景 这几天在维护公司的一个项目,嗯…到现在七八年没人动过了(也是老古董了),都说N年前的代码碰不得 处处是坑 不能挖坑还得一步一步的填坑,恰好今天就填了一坑 此处作为记录 供以后翻阅,对代码除了 ...

  5. XAF 如何将数据库中Byte array图片显示出来

    问题比较简单,直接上代码. private Image _Cover; [Size(SizeAttribute.Unlimited), ValueConverter(typeof(ImageValue ...

  6. ArcGIS10.1 发布气温插值GP服务

    首先通过ModelBuilder 工具 构建模型 然后通过模块右键 设置输入参数 或者直接将一个模块设为输入参数 在输出模块的右键属性上 可以设置lyr文件用于渲染 设置数据添加到显示用于不是发布的时 ...

  7. apache2.4配置Django1.7运行环境

    系统环境Centos 6.5 这篇文章不适用6以下的系统,因为会碰到这个错误 [Mon Sep 22 18:13:02 2014] [error] [client 10.209.75.90] Trun ...

  8. 安装win7的那些事

    由于win7系统只支持MBR格式的分区,如果强行将win7安装到UEFI分区方式的硬盘上将不能启动,所以,如果你要给别人的win8或者win10的OEM系统安装win7的话,记得先将重要数据备份出去, ...

  9. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  10. 关于AngularJs，数据绑定与自定义验证

    最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那 ...