结构：

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. 【实践】js实现简易的四则运算计算器

    最近看了一个大神推荐的某公司面试程序员的js 面试题,题目是用js 做一个计算器于是跟着大神的思想自己做了一下 ps:功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中. 闲话不多说先上css代码 & ...

  2. DEV皮肤颜色获取

    Skin GridSkin = GridSkins.GetSkin(UserLookAndFeel.Default.ActiveLookAndFeel); evenColor = GridSkin[G ...

  3. 放在NSArray、NSDictionary等容器内的对象Item，Item中的property在程序运行过程中被无故释放

    可能是被释放的property本身是OC对象而它的属性被误写成assign,例如: @interface MyItem : Object @property (nonatomic, assign) N ...

  4. 制作QQ空间的一些想法

    新的项目开始了,这一次是做一个网站类似于QQ空间那样的,基本功能比如说写日志,说说之类的都要有(说说是要有楼中楼嵌套的,应该能够上传图片),还要可以修改个人信息.登录注册之类的更不用说了,还要有一定的 ...

  5. [转]save all TWebbrowser Frame Sources?

    注:有一定的参考价值,转存 // Code 1 uses  ActiveX, MSHTML_TLB, ComCtrls, ComObj; function GetBrowserForFrame(Doc ...

  6. webstorm2016.2 for mac 安装

    文件来自斯蒂芬周: http://www.sdifenzhou.com/?p=6941&jdfwkey=jmnzy 附上详细安装步骤:

  7. 如何输出function执行的语句

    SQL>  set serveroutput on;SQL> exec dbms_output.put_line(1); set   serveroutput   on   size   ...

  8. 遗传算法在JobShop中的应用研究（part 6：结果显示）

    def FormatSolution(s, C, I): T = [0 for j in xrange(I.n)] S = [[0 for t in I[j]] for j in xrange(I.n ...

  9. [OC][地图] 高德地图之定位初探(一)

    使用前的说明 高德地图开放平台的iOS定位模块网址-->http://lbs.amap.com/api/ios-location-sdk/summary/ 高德地图有Web端.android平台 ...

  10. 在 ASP.NET MVC 中使用 HTML Helpers 的那些事

    在 ASP.NET MVC 中使用 HTML Helpers 方法,可以返回得到标准的 HTML 标签,就像 <input>.<button> 或者 <img> 等 ...