ajax版聊天室

柔情只为你懂 2022-11-29 11:28 221阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

> #  ajax版聊天室大致思路 #
> 
> ## **步骤1.** ##
> 
> ## **点击发送按钮发送消息(即ajax通过post方式，把消息insert到数据库的聊天表中)** ##
> 
> ### **xhr.open('post', url, true);** ###
> 
> ### **xhr.send(messageData);** ###
> 
> ## **步骤****2.** ##
> 
> ## **通过ajax读取数据库中的聊天表的数据** ##
> 
> ### **xhr.open('get', url, true);   xhr.send(null);** ###
> 
> ## **步骤****3.** ##
> 
> ## **通过****setInterval()函数****，每隔几秒钟就用ajax读取数据库中的聊天表的数据(****即setInterval(步骤2, 2000)****)** ##

数据库中chat表是聊天表，表设计的比较简略，表不是我们的重点，我们今天的重点是学习ajax

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

**发送消息的js代码如下：**

![20200820034846747.png][]

//发送消息
    document.getElementById('send').onclick = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log(xhr.responseText);
    			if(xhr.responseText == 1){
    				document.getElementById('messageBox').value = '';
    				document.getElementById('whetherSendSucceed').innerHTML = '发送成功';
    				document.getElementById('whetherSendSucceed').style.display = 'inline';
    				setTimeout(hideWhetherSendSucceedBox, 2000);
    			}
    		}
    	}
    	var url = '/ajax/ajaxChatServlet';
    	xhr.open('post', url, true);
    	xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
    	var messageInfo = document.getElementById('messageBox').value;
    	//userId和userName的值，我这里写死了，主要是为了测试，图个方便
    	var messageData = 'flag=save&userId=88&userName=jack&message=' + messageInfo;
    	console.log(messageData);
    	xhr.send(messageData);
    }

**读取聊天消息的js代码如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

/*
    间隔时间别设置太长了，要不然最新的聊天记录会被延迟;
    间隔时间也别设置太短了，要不然频繁的请求数据库，数据库压力会很大
    */
    //刷新聊天记录，每隔3秒钟就去数据库中获取最新的聊天记录
    setInterval(refreshMessage, 3000);
    
    function refreshMessage() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    //见鬼了，火狐浏览器测试出来的结果，readyState打印出来是4，status打印出来是0，status一般是200或者404或者500之类的，为什么会是0
    //大家可以去网上搜一下，为什么status会是0
    		console.log(this.readyState, this.status);//4 0
    		console.log(this.responseText, typeof this.responseText);//<empty string> string
    		console.log(this.responseText == '', this.responseText === '');//true true
    		console.log(this.responseText == null, this.responseText === null);//false false
    		console.log(typeof '', typeof null, typeof undefined);//string object undefined
    		console.log(typeof '{}', typeof '[]', typeof {}, typeof []);//string string object object
    		
    		//所以，最好还是加上this.status == 200这句话
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			var json = this.responseText;
    			console.log('json=' + json);
    // 			var jsonObj = eval(json);
    			var jsonObj = eval('(' + json + ')');
    			console.log('***********************************');
    			
    			//以下代码都是测试代码
    			var test = [{}, {}];
    			console.log(json, json.length);
    			console.log(jsonObj, jsonObj.length);
    			console.log(test, test.length);
    			console.log(typeof json, typeof jsonObj, typeof test);
    			console.log(json instanceof Object, jsonObj instanceof Object, test instanceof Object);
    			console.log(json instanceof Array, json instanceof Object);
    			var test2 = '[{}, {}]';
    			console.log(test2, test2.length, typeof test2);
    			var jsonTest2 = eval('(' + test2 + ')');
    			console.log(jsonTest2, jsonTest2.length, typeof jsonTest2);
    			var json_Test2 = eval(test2);
    			console.log(json_Test2, json_Test2.length, typeof json_Test2);
    			//
    			
    			var showMessageDiv = document.getElementById("showMessageBox");
    			var messageCount = jsonObj.length;
    			var str = '';
    			for (var index = 0; index < messageCount; index++) {
    				var mesg = jsonObj[index];
    				console.log(mesg.userId + '/' + mesg.userName + '/' + mesg.message + '/' + mesg.sendTime);
    				str += '<font color="blue">用户id:' + mesg.userId + '   ' + '用户名：' + mesg.userName + '   ' + '发言时间：' + mesg.sendTime + '</font><br />';
    				str += mesg.message + '<br /><br />';
    			}
    			showMessageDiv.innerHTML = str;
    			//div的滚动条自动保持在底部，这样就可以直接看到最新的聊天记录，不用手动把滚动条拉到底部
    			//参考https://www.jb51.net/article/93425.htm
    			//参考https://blog.csdn.net/wybshyy/article/details/52064362
    			//参考https://blog.csdn.net/sdfadfsdf/article/details/80281736
    			showMessageDiv.scrollTop = showMessageDiv.scrollHeight;
    		}
    	}
    	var url = '/ajax/ajaxChatServlet?randomNumber=' + Math.random();
    	xhr.open('get', url, true);
    	xhr.send(null);
    }

**以下是完整的代码！**

**ajaxChat.html**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ajax版聊天室</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" />
    <link rel="stylesheet" type="text/css" href="../css/mark.css" />
    <link rel="stylesheet" type="text/css" href="../css/input2.css" />
    <link rel="stylesheet" type="text/css" href="../css/console.css" />
    </head>
    <body>
    <h1>ajax版聊天室</h1>
    <div class="testDiv3" id="showMessageBox" style="width: 70%;height: 350px;">
    </div>
    <textarea rows="" cols="" id="messageBox" style="width: 70%;height: 60px;">
    请在此输入聊天内容,点击发送即可！
    </textarea>
    <br />
    <input type="button" id="send" style="width: 150px;height: 40px;" value="发送" />
    <div id="whetherSendSucceed" style="border-width: 2px; display: none;" class="testDiv2">
    </div>
    <br /><br />
    <h1>测试闭包</h1>
    <input type="button" id="button1" value="测试闭包" />
    <br /><br />
    <input type="text" id="input1" value="江西省赣州市于都县" />
    <br /><br />
    <input type="text" id="input2" value="江西于都县" />
    <br /><br />
    </body>
    <script type="text/javascript">
    document.getElementById('messageBox').onfocus = function() {
    	//replace(/\s+/g,""); //去除所有空格
    	if (this.value.replace(/\s+/g, '') == '请在此输入聊天内容,点击发送即可！') {
    		this.value = '';
    	}
    }
    
    function hideWhetherSendSucceedBox() {
    	document.getElementById('whetherSendSucceed').style.display = 'none';
    }
    
    //发送消息
    document.getElementById('send').onclick = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log(xhr.responseText);
    			if(xhr.responseText == 1){
    				document.getElementById('messageBox').value = '';
    				document.getElementById('whetherSendSucceed').innerHTML = '发送成功';
    				document.getElementById('whetherSendSucceed').style.display = 'inline';
    				setTimeout(hideWhetherSendSucceedBox, 2000);
    			}
    		}
    	}
    	var url = '/ajax/ajaxChatServlet';
    	xhr.open('post', url, true);
    	xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
    	var messageInfo = document.getElementById('messageBox').value;
    	//userId和userName的值，我这里写死了，主要是为了测试，图个方便
    	var messageData = 'flag=save&userId=88&userName=jack&message=' + messageInfo;
    	console.log(messageData);
    	xhr.send(messageData);
    }
    
    /*
    间隔时间别设置太长了，要不然最新的聊天记录会被延迟;
    间隔时间也别设置太短了，要不然频繁的请求数据库，数据库压力会很大
    */
    //刷新聊天记录，每隔3秒钟就去数据库中获取最新的聊天记录
    setInterval(refreshMessage, 3000);
    
    function refreshMessage() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    //见鬼了，火狐浏览器测试出来的结果，readyState打印出来是4，status打印出来是0，status一般是200或者404或者500之类的，为什么会是0
    //大家可以去网上搜一下，为什么status会是0
    		console.log(this.readyState, this.status);//4 0
    		console.log(this.responseText, typeof this.responseText);//<empty string> string
    		console.log(this.responseText == '', this.responseText === '');//true true
    		console.log(this.responseText == null, this.responseText === null);//false false
    		console.log(typeof '', typeof null, typeof undefined);//string object undefined
    		console.log(typeof '{}', typeof '[]', typeof {}, typeof []);//string string object object
    		
    		//所以，最好还是加上this.status == 200这句话
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			var json = this.responseText;
    			console.log('json=' + json);
    // 			var jsonObj = eval(json);
    			var jsonObj = eval('(' + json + ')');
    			console.log('***********************************');
    			
    			//以下代码都是测试代码
    			var test = [{}, {}];
    			console.log(json, json.length);
    			console.log(jsonObj, jsonObj.length);
    			console.log(test, test.length);
    			console.log(typeof json, typeof jsonObj, typeof test);
    			console.log(json instanceof Object, jsonObj instanceof Object, test instanceof Object);
    			console.log(json instanceof Array, json instanceof Object);
    			var test2 = '[{}, {}]';
    			console.log(test2, test2.length, typeof test2);
    			var jsonTest2 = eval('(' + test2 + ')');
    			console.log(jsonTest2, jsonTest2.length, typeof jsonTest2);
    			var json_Test2 = eval(test2);
    			console.log(json_Test2, json_Test2.length, typeof json_Test2);
    			//
    			
    			var showMessageDiv = document.getElementById("showMessageBox");
    			var messageCount = jsonObj.length;
    			var str = '';
    			for (var index = 0; index < messageCount; index++) {
    				var mesg = jsonObj[index];
    				console.log(mesg.userId + '/' + mesg.userName + '/' + mesg.message + '/' + mesg.sendTime);
    				str += '<font color="blue">用户id:' + mesg.userId + '   ' + '用户名：' + mesg.userName + '   ' + '发言时间：' + mesg.sendTime + '</font><br />';
    				str += mesg.message + '<br /><br />';
    			}
    			showMessageDiv.innerHTML = str;
    			//div的滚动条自动保持在底部，这样就可以直接看到最新的聊天记录，不用手动把滚动条拉到底部
    			//参考https://www.jb51.net/article/93425.htm
    			//参考https://blog.csdn.net/wybshyy/article/details/52064362
    			//参考https://blog.csdn.net/sdfadfsdf/article/details/80281736
    			showMessageDiv.scrollTop = showMessageDiv.scrollHeight;
    		}
    	}
    	var url = '/ajax/ajaxChatServlet?randomNumber=' + Math.random();
    	xhr.open('get', url, true);
    	xhr.send(null);
    }
    
    function fn1(){
    	
    	console.log(eval("{}")); //undefined
    	console.log(eval('{}')); //undefined
    	console.log(eval("({})")); //Object {  }
    	console.log(eval('({})')); //Object {  }
    	console.log(eval("(" + "{}" + ")")); //Object {  }
    	console.log(eval('(' + '{}' + ')')); //Object {  }
    // 	console.log(eval("(" + "{[]}" + ")")); //报错SyntaxError: expected expression, got ']'
    // 	console.log(eval('(' + '{[]}' + ')')); //报错SyntaxError: expected expression, got ']'
    	console.log(eval({})); //Object {  }
    	console.log(eval({name:"jack"})); //Object { name: "jack" }
    	console.log(eval('{name:"tom"}')); //tom
    	console.log(eval("{name:'jerry'}")); //jerry
    	var test = '{[], [], []}';
    	console.log(eval(test)); //Array []
    // 	console.log(eval('(' + test + ')')); //报错SyntaxError: expected expression, got ']'
    // 	console.log(eval("(" + test + ")")); //报错SyntaxError: expected expression, got ']'
    
    	var test2 = '{}';
    	console.log(eval(test2)); //undefined
    	console.log(eval('(' + test2 + ')')); //Object {  }
    	console.log(eval("(" + test2 + ")")); //Object {  }
    	
    	var test6 = {};
    	console.log(eval(test6)); //Object {  }
    // 	console.log(eval('(' + test6 + ')')); //报错SyntaxError: missing ] after element list
    // 	console.log(eval("(" + test6 + ")")); //报错SyntaxError: missing ] after element list
    	
    	var test3 = '[{}, {}]';
    	console.log(eval(test3)); //Array [ {}, {} ]
    	console.log(eval('(' + test3 + ')')); //Array [ {}, {} ]
    	console.log(eval("(" + test3 + ")")); //Array [ {}, {} ]
    	
    	var test8 = {};
    	//true false
    	console.log(test8 instanceof Object, test8 instanceof Array);
    	console.log(typeof test8); //object
    	
    	var test9 = [];
    	//true true
    	console.log(test9 instanceof Object, test9 instanceof Array);
    	console.log(typeof test9); //object
    	
    }
    
    fn1();
    
    function fn2(){
    	return 'hello';
    }
    
    var a = fn2();
    console.log(a); //hello
    
    function fn3(){
    	return fn2();
    }
    
    var b = fn3();
    console.log(b); //hello
    
    function fn4(){
    	var v = function fn5(){
    		return '江西省赣州市于都县';
    	}
    	return v;
    }
    
    var result = fn4();
    console.log(result); //function fn5()
    console.log(result()); //江西省赣州市于都县
    
    /*
    打印出
    ******我是fn7()，我执行了******
    江西于都县666
    */
    console.log((function fn6(){
    	var f = function fn7(){
    		console.log('******我是fn7()，我执行了******');
    		return '江西于都县666';
    	}
    	return f;
    })()());
    
    
    //测试闭包
    document.getElementById('button1').onclick = function() {
    	var inputNodes = document.getElementsByTagName('input');
    	var count = inputNodes.length;
    	for (var index = 0; index < count; index++) {
    		var inputNode = inputNodes[index];
    		console.log(inputNode, inputNode.type);
    		console.log('*******************');
    		if (inputNode.type == 'text') {
    			inputNode.onclick = (function(parameter) {
    // 				alert('--' + index);
    // 				alert('==' + parameter);
    				return fn9(parameter);
    			})(index);
    		}
    	}
    };
    
    //测试闭包
    function fn9(param){
    	var f = function fn10() {
    		alert(param);
    	}
    	return f;
    }
    
    function fn8() {
    console.log('(' + null + ')'); //(null)
    console.log(typeof ('(' + null + ')')); //string
    console.log('(' + 666 + ')'); //(666)
    // console.log('(' + abc + ')'); //ReferenceError: abc is not defined
    console.log('(' + 'null' + ')'); //(null)
    console.log(typeof ('(' + 'null' + ')')); //string
    console.log(eval('(' + null + ')')); //null
    console.log(eval('(null)')); //null
    // console.log(eval('(' + '' + ')')); //SyntaxError: expected expression, got ')'
    console.log(eval('(' + undefined + ')')); //undefined
    // console.log(eval('(' + ')')); //SyntaxError: expected expression, got ')'
    // console.log(eval('()')); //SyntaxError: expected expression, got ')'
    }
    
    fn8();
    </script>
    </html>

**AjaxChat类**

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.jiongmeng.dao.ChatDAO;
    import com.jiongmeng.entity.Chat;
    
    import net.sf.json.JsonConfig;
    
    /**
     * ajax版聊天室
     */
    @WebServlet("/ajaxChatServlet")
    public class AjaxChat extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	public static final String AJAX_POST_ENCODE = "UTF-8";
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		request.setCharacterEncoding(AJAX_POST_ENCODE);
    		PrintWriter pw = response.getWriter();
    		String flag = request.getParameter("flag");
    		String userId = request.getParameter("userId");
    		String userName = request.getParameter("userName");
    		String message = request.getParameter("message");
    		System.out.println("userId=" + userId + " userName=" + userName + " message=" + message);
    		ChatDAO chatDAO = new ChatDAO();
    		if ("save".equals(flag)) {
    			Chat chat = new Chat(0, Integer.parseInt(userId), userName, message, null);
    			int effectRows = chatDAO.saveChat(chat);
    			pw.print(effectRows);
    		}else{
    		//获得所有聊天内容
    		String json = chatDAO.queryChatToJson();
    		try {
    			// 模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) { 
    			e.printStackTrace();
    		}
    		pw.print(json);
    	 }
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    
    }

**ChatDAO类**

package com.jiongmeng.dao;
    
    import java.sql.Connection;
    import java.util.Date;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.jiongmeng.entity.Chat;
    import com.jiongmeng.tool.DateTool;
    import com.jiongmeng.tool.JsonDateValueProcessor;
    
    import net.sf.json.JSONArray;
    import net.sf.json.JsonConfig;
    
    //从mysql数据库中读取出数据并封装成json
    public class ChatDAO {
    	//
    	public List<Chat> queryChat() {
    		List<Chat> list = new ArrayList<Chat>();
    		DBManger dbManger = new DBManger();
    		String sql = "select id, userId, userName, message, sendTime from chat";
    		ResultSet rs = dbManger.query(sql);
    		try {
    			while (rs.next()) {
    				int id = rs.getInt("id");
    				int userId = rs.getInt("userId");
    				String userName = rs.getString("userName");
    				String message = rs.getString("message");
    				Date sendTime = rs.getTimestamp("sendTime");
    				Chat chat = new Chat(id, userId, userName, message, sendTime);
    				list.add(chat);
    				}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}finally {
    			dbManger.closeDB();
    		}
    		return list;
    	}
    	
    	//
    	public String queryChatToJson() {
    		JsonConfig jsonConfig = new JsonConfig();
    		jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());
    		JSONArray jsonArray = JSONArray.fromObject(queryChat(), jsonConfig);
    		System.out.println(jsonArray.isEmpty());
    		String json = jsonArray.toString();
    		System.out.println(json);
    		return json;
    	}
    	
    	public int saveChat(Chat chat) {
    //		int id = chat.getId();
    		int userId = chat.getUserId();
    		String userName = chat.getUserName();
    		String message = chat.getMessage();
    //		String sendTime = DateTool.getDateStr(chat.getSendTime());
    		String sql = "insert into chat values(null, " + userId + ", '" + userName + "', '" + message + "', now())";
    		DBManger dbManger = new DBManger();
    		return dbManger.update(sql);
    	}
    
    }

**Chat类(实体类)**

package com.jiongmeng.entity;
    
    //聊天表实体类
    public class Chat {
    	
    	private int id;
    	private int userId;
    	private String userName;
    	private String message;
    	private java.util.Date sendTime;
    	
    	public Chat() {
    		super();
    	}
    
    	public Chat(int id, int userId, String userName, String message, java.util.Date sendTime) {
    		super();
    		this.id = id;
    		this.userId = userId;
    		this.userName = userName;
    		this.message = message;
    		this.sendTime = sendTime;
    	}
    
    	public int getId() {
    		return id;
    	}
    
    	public void setId(int id) {
    		this.id = id;
    	}
    
    	public int getUserId() {
    		return userId;
    	}
    
    	public void setUserId(int userId) {
    		this.userId = userId;
    	}
    
    	public String getUserName() {
    		return userName;
    	}
    
    	public void setUserName(String userName) {
    		this.userName = userName;
    	}
    
    	public String getMessage() {
    		return message;
    	}
    
    	public void setMessage(String message) {
    		this.message = message;
    	}
    
    	public java.util.Date getSendTime() {
    		return sendTime;
    	}
    
    	public void setSendTime(java.util.Date sendTime) {
    		this.sendTime = sendTime;
    	}
    
    }

**DBManger类**

package com.jiongmeng.dao;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    public class DBManger {
    	
    	private static final String DB_NAME = "aaa";
    	private static final String URL = "jdbc:mysql://localhost:3306/" + DB_NAME;
    	private static final String Driver = "com.mysql.jdbc.Driver";
    	private static final String USER = "root";
    	private static final String PASSWORD = "root";
    	private Connection connection = null;
    	private PreparedStatement prepareStatement = null;
    	private ResultSet rs = null;
    	
    	//
    	public ResultSet query(String sql) {
    		try {
    			Class.forName(Driver);
    			connection = DriverManager.getConnection(URL, USER, PASSWORD);
    			prepareStatement = connection.prepareStatement(sql);
    			rs = prepareStatement.executeQuery();
    		} catch (ClassNotFoundException  | SQLException e) {
    			e.printStackTrace();
    		}
    		return rs;
    	}
    	
    	//
    	public int update(String sql) {
    		int effectRows = 0;
    		try {
    			Class.forName(Driver);
    			connection = DriverManager.getConnection(URL, USER, PASSWORD);
    			prepareStatement = connection.prepareStatement(sql);
    			effectRows = prepareStatement.executeUpdate(sql);
    		} catch (ClassNotFoundException  | SQLException e) {
    			e.printStackTrace();
    		}finally {
    			closeDB();
    		}
    		return effectRows;
    	}
    	
    	//
    	public void closeDB() {
    		try {
    			if (rs != null) {
    				rs.close();
    			}
    			if (prepareStatement != null) {
    				prepareStatement.close();
    			}
    			if (connection != null) {
    				connection.close();
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    	}
    }

**JsonDateValueProcessor类(java中的日期类型在转换成json时，会报错，所以需要JsonDateValueProcessor类)**

package com.jiongmeng.tool;
    
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    import net.sf.json.JsonConfig;
    import net.sf.json.processors.JsonValueProcessor;
    
    public class JsonDateValueProcessor implements JsonValueProcessor {
    	//默认样式，可以在构造方法中修改
    	private  String datePattern = "yyyy-MM-dd HH:mm:ss";
    	
    	public JsonDateValueProcessor() {
    		super();
    	}
    	
    	public String getDatePattern() {
    		return datePattern;
    	}
    	public void setDatePattern(String datePattern) {
    		this.datePattern = datePattern;
    	}
    	
    	public JsonDateValueProcessor(String datePattern) {
    		super();
    		this.datePattern = datePattern;
    	}
    
    	@Override
    	public Object processArrayValue(Object object, JsonConfig jsonConfig) {
    		try {
    			if(object instanceof Date){
    				SimpleDateFormat sdf = new SimpleDateFormat(datePattern);
    				Date date = (Date)object;
    				return sdf.format(date);
    			}
    			return object == null ? null : object.toString();
    		} catch (Exception e) {
    			return null;
    		}
    	}
    
    	@Override
    	public Object processObjectValue(String string, Object object, JsonConfig jsonConfig) {
    		return processArrayValue(object, jsonConfig);
    	}
    
    }

**这是一个粗略版的ajax聊天室！**

**当然啦，如果想做的更完善的话，可以继续改进，比如，可以发送图片，发送表情等等，就像下图这样，总之，大家可以充分的发挥自己的想象力和创意！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

**[聊天室][Link 1]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7][]

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200819231856269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/854b1723ac454ab087feb75bc9cfaf26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/cb0fb6efd1ed4eaca34c13354d9c31f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200819232701935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/dc5d37d98437498bacbea90f5488e895.png
[20200820034846747.png]: /images/20221124/5e1bfce455f84959a53d273c4346261c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221124/8ed7eb0ab59d43f3a03a4da045b1144e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221124/1f5752f25daf4df9a171c1ce4f42fd54.png
[Link 1]: http://lgcweb.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7]: /images/20221124/8c47e54e0e4f480ba3fbffe2520303a5.png