Ajax实现在线聊天室

最新推荐文章于 2024-06-07 16:02:01 发布

Jere11

最新推荐文章于 2024-06-07 16:02:01 发布

阅读量6.4k

点赞数 4

分类专栏： web前端文章标签： Ajax

本文链接：https://blog.csdn.net/u011246325/article/details/44964945

版权

功能实现及开发过程可能遇到的问题

发送聊天的消息和实时显示聊天的消息一定要分开处理！
发送聊天消息如何实现？
①在多行文本框上面绑定“按下键盘[keypress]”事件，在用户按回车键时发送Ajax请求
②接收到Ajax请求后，保存聊天记录信息
实时显示聊天记录如何实现？
①困难：
[1]服务器端不会主动的告诉浏览器有新的聊天记录了，而是只能被动的响应浏览器的请求
[2]浏览器不知道服务器端什么时候产生了新的聊天记录
②在浏览器端不间断的发送请求，询问服务器现在是否有新的聊天记录了
如何实现？setTimeout(回调函数的引用,毫秒值);
③服务器端接收到浏览器询问后，检查当前是否有新的聊天记录，如果有，返回true
④如果询问的结果是true，再发送请求，从服务器端获取新的聊天记录内容
⑤如何知道哪些记录是新的呢？
- 在浏览器端维护一个全局变量，保存本地最新的记录的ID值
- 在询问服务器时，将本地ID值发送过去
- 服务器端根据ID值判断哪些记录是最新的

1. 新建AjaxChat，代码目录图如图所示

这里写图片描述

2.主界面index.jsp的代码如下，代码中已带有注释

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="script/dateFormate.js"></script>
<script type="text/javascript">

    $(function(){
    

        //用于保存当前本地最新的聊天记录ID值，初始值为0，目的是第一次加载时获取全部聊天记录
        var finalMessageId = 0;

        askForNew();

        //声明函数：询问服务器端是否存在新的聊天记录
        function askForNew() {
    

            $.post("ServletAsk",{
   "finalMessageId":finalMessageId},function(hasNew){
    

                //注意：这里hasNew是字符串，即使服务器返回的是"false"，在if中判断也为true
                if(hasNew == "true") {

                    //给服务器端发送请求，获取最新的聊天记录
                    getNew();

                }

            },"text");

            //注意：一定要使用函数的引用，不能加()
            setTimeout(askForNew, 1000);

        }

        //声明函数：获取新的聊天记录内容
        function getNew() {
    

            var $showMessage = $("#showMessage");

            $.post("ServletGetNew",{
   "finalMes

最低0.47元/天解锁文章

Jere11

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
Ajax实现在线聊天室

功能实现及开发过程可能遇到的问题发送聊天的消息和实时显示聊天的消息一定要分开处理！发送聊天消息如何实现？ ①在多行文本框上面绑定“按下键盘[keypress]”事件，在用户按回车键时发送Ajax请求 ②接收到Ajax请求后，保存聊天记录信息实时显示聊天记录如何实现？ ①困难： [1]服务器端不会主动的告诉浏览器有新的聊天记录了，而是只能被动的响应浏览器的请求 [2]浏览器不知道服务
复制链接

扫一扫

专栏目录