AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)

2024-02-10 16:30
文章标签 问题 js 解决 ajax demo ie 聊天室 讨厌 下有

本文主要是介绍AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

太闲啦,太闲啦,连续一月没上课了.不知他们想我没.昨QQ上一JJ给我看她写的聊天室,刷的眼难受,让我帮她写个不刷新的给她看.就是闲嘛,一切都是Teach Myself,从来没人指导过我.想帮帮她.偶尔有个人帮我我也很感动.顺便自个学点东西吧.一直没用在CNBLOGS上东西,上次发错了,发到首页上去了,写的一个数据结构的代码片断,一大哥骂我不写注释,原来首页就是那个意思,现在我没事就往首页上发,旨在寻人骂我.我是菜鸟我怕谁,PS:在此之前我只懂点AJAX原理,对框架一无所知.以下是DEMO.发上来主要是给大家批评的还有点问题想请教.
我用XML做一个队列类似的东西存储10条信息.先入先出.再用ajax取出信息反应到聊天窗口,聊天窗口1秒刷一次
default.aspx页 表单部分
下面是ajax_chat.js代码
             var  sendReq  =  createAjaxObj();
             var  receiveReq  =  createAjaxObj();
             var  mTimer;
             var  lastMessage  =   0 ;   // 最后一条Message ID值
             var  n_messages = 0 ;   // XML中的MESSAGE节点数,我设的是10条
             var  diff = 0 ;
             var  chat_div  =  document.getElementById('div_chat');
             function  startChat()
                      
 function  createAjaxObj()
 {
//创建兼容的的xmlhttp对象
    var xmlhttp;
     try
        {
        xmlhttp=new ActiveObject('Msxml2.XMLHTTP');
        }
        catch(e)
        {
            try
            {
            xmlhttp=new ActiveObject('Microsoft.XMLHTTP');
            }
            catch(e)
            {
                try
                {
                xmlhttp=new XMLHttpRequest();
                }
                catch(e){}
            }
        }
       return xmlhttp;
}
// 获取XML文本
function  getChatText() 
 {

//判断上次请求的状态是否完成或是还未发送请求
    if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
        //从content.xml获取聊天内容
    receiveReq.open("get","content.xml");
    //当请求状态改变时调用handleReceiveChat方法
        receiveReq.onreadystatechange = handleReceiveChat; 
        receiveReq.send(null);//因为是get方法所以发送请求null
    }            
}
function  handleReceiveChat() 
 {

    if (receiveReq.readyState == 4)
     {//此时请求已经完成
       //获得显示消息的图曾层元素
        var chat_div = document.getElementById('div_chat');
        //获得返回后的XML文件
        var xmldoc = receiveReq.responseXML;
        //得到所有的新的消息记录
        var message_nodes = xmldoc.getElementsByTagName("message"); 
        n_messages = message_nodes.length;
        

        var id=message_nodes[n_messages-1].getAttribute("id");
        lastMessage=getCookie("lastMessage");
        if(lastMessage==null)
        {
            addCookie("lastMessage","0",10);
            lastMessage=getCookie("lastMessage");
         }
         
         if(id-lastMessage>=n_messages)
         {
          var i=0;
            diff=n_messages;
            while((message_nodes[n_messages-1].getAttribute("id")>=lastMessage)&&i<=diff-1)
            {
                var user_node = message_nodes[i].getElementsByTagName("user");
                var text_node = message_nodes[i].getElementsByTagName("text");
                var time_node = message_nodes[i].getElementsByTagName("time");
                chat_div.innerHTML += '(<font class="chatUser">'+user_node[0].firstChild.nodeValue + '</font>)&nbsp;said at &nbsp;';
                chat_div.innerHTML += '<font class="chatTime">' + time_node[0].firstChild.nodeValue + '</font><br />';
                chat_div.innerHTML += '<span class="title">'+text_node[0].firstChild.nodeValue + '</span><br />';
                chat_div.scrollTop = chat_div.scrollHeight;
                //每循环一条消息，记录到id到,lastMessage的cookie中        
                lastMessage = (message_nodes[i].getAttribute("id"));
                deleteCookie("lastMessage");
                addCookie("lastMessage",lastMessage,5);
                
                 i++;
              // alert("this lastMessage:"+lastMessage);    
                 
            }
         }
         else
         {
            while(message_nodes[n_messages-1].getAttribute("id")>lastMessage)
            {
                var dif=message_nodes[n_messages-1].getAttribute("id")-lastMessage;
                var temp=n_messages-dif;
                if(dif!=0)
                {
                var user_node = message_nodes[temp].getElementsByTagName("user");
                var text_node = message_nodes[temp].getElementsByTagName("text");
                var time_node = message_nodes[temp].getElementsByTagName("time");
                chat_div.innerHTML += '(<font class="chatUser">'+user_node[0].firstChild.nodeValue + '</font>)&nbsp;said at &nbsp;';
                chat_div.innerHTML += '<font class="chatTime">' + time_node[0].firstChild.nodeValue + '</font><br />';
                chat_div.innerHTML += '<span class="title">'+text_node[0].firstChild.nodeValue + '</span><br />';
                chat_div.scrollTop = chat_div.scrollHeight;
                //每循环一条消息，记录到全局变量lastMessage的Cookie中        
          
                deleteCookie("lastMessage");
                 lastMessage++;
                addCookie("lastMessage",lastMessage,1);
               
                temp++;
                }
              
               //alert("this lastMessage:"+lastMessage+"getAttribute:"+message_nodes[n_messages-1].getAttribute("id"));    
                 
            }
         }
         
       
    }
}
// 发送聊天内容
function  sendChatText()
  {
       if(document.getElementById('userName').value=='annoymous')
       {
            alert("Input your name!");
            return;
       }
//如果输入的消息为空，提示用户输入
    if(document.getElementById('txt_message').value == '')
     {
        alert("You have not entered a message");
        return;
    }
    //判断上次发送消息请求的状态是否完成或是还未发送请求
    if (sendReq.readyState == 4 || sendReq.readyState == 0) 
    {
       //保存消息的服务器地址
        var submitURL = "sendMessage.aspx?userName="+document.getElementById('userName').value+"&msg="+document.getElementById('txt_message').value;
        sendReq.open("POST",  submitURL , true);//建立请求连接
        sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        sendReq.onreadystatechange = handleSendChat; //当请求状态改变时调用handleSendChat方法
        sendReq.send(null);//发送请求
       
        document.getElementById('txt_message').value = '';//设置提交消息文本框为空
      
    }                            
}
function  handleSendChat()
  {
 //发送后强制执行一次获取聊天内容一次

    //lastMessage =getCookie("lastMessage");
    getChatText();
}

// 三个JS常用的函数网上抄的
function  addCookie(name,value,expireMin)
 {
    var cookieString=name+"="+escape(value);
    //判断是否设置过期时间
    if(expireMin>0){
        var date=new Date();
        date.setTime(date.getTime+expireMin*60*1000);
        cookieString=cookieString+"; expire="+date.toGMTString();
    }
    document.cookie=cookieString;
}
function  getCookie(name)
 {
//获取指定名称的Cookie值
    var strCookie=document.cookie;
    var arrCookie=strCookie.split(";");
    for(var i=0;i<arrCookie.length;i++)
    {
        var arr=arrCookie[i].split("=");
        if(arr[0]==name)
        return arr[1];
    }
    return null;
}
   function  deleteCookie(name)
   {
     var expires=new Date();
     expires.setTime(expires.getTime()-1);
     addCookie(name,"Delete Cookie",expires);
   }


点击发送 sendMessage.aspx
public  partial  class  sendMessage : System.Web.UI.Page
 {
    XmlDocument doc;
    string filePath; //聊天内容存储的XML文件
    protected void Page_Load(object sender, EventArgs e)
    {
        filePath = Server.MapPath("content.xml");
        doc = new XmlDocument();
        doc.Load(filePath);
        if (!IsPostBack)
        {
            if (Application["lock"].ToString() == "unlock")
             {
                Application["lock"] = "lock"; //锁定防止多用户操作
                int num = GetLastMsgId();
                num++;
                string msgid = num.ToString();

                if (Request.QueryString["userName"] != string.Empty && Request.QueryString["msg"] != string.Empty)
                {
                    if (GetMsgNum() < 10)
                    {
                        //如果消息少于10条,添加结点
                        AddInLast(msgid, Request.QueryString["userName"].Trim(), Request.QueryString["msg"].Trim());
                    }
                    else
                    {
                        //如果消息少于10条,弹出第一条,再向末结点后添加结点
                        DelFirst();
                        AddInLast(msgid, Request.QueryString["userName"].Trim(), Request.QueryString["msg"].Trim());
                    }
                    
                }
                Application["lock"] = "unlock"; //解锁
            }
        }
        doc = null;
    }
    public void DelFirst()
    {
        //如果超过10条弹出第一条
        XmlNode node = doc.DocumentElement;
       
        node.RemoveChild(node.FirstChild);
    }
    public int GetMsgNum()
    {
        //Message数目
        XmlNode node = doc.DocumentElement;
        return node.ChildNodes.Count;
    }
    public int GetLastMsgId()
    {
        //最后一条ID
        XmlNode node = doc.DocumentElement;
        XmlElement last = (XmlElement)node.LastChild;
        return Convert.ToInt32(last.GetAttribute("id"));
    }
    public void AddInLast(string id,string strUser,string strContent)
    {
        //加入新建Messag结点
        XmlNode node = doc.DocumentElement;
        XmlElement msgNode = doc.CreateElement("message");
        msgNode.SetAttribute("id",id);
        node.AppendChild(msgNode);


        XmlElement eleUser = doc.CreateElement("user");
        XmlText textUser = doc.CreateTextNode(strUser);
        eleUser.AppendChild(textUser);
        msgNode.AppendChild(eleUser);

        XmlElement eleContent = doc.CreateElement("text");
        XmlText textText = doc.CreateTextNode(strContent);
        eleContent.AppendChild(textText);
        msgNode.AppendChild(eleContent);

        XmlElement eleTime = doc.CreateElement("time");
        XmlText textTime = doc.CreateTextNode(DateTime.Now.ToString());
        eleTime.AppendChild(textTime);
        msgNode.AppendChild(eleTime);

        doc.Save(filePath);

    }
}

content.xml结构:
<? xml version="1.0" encoding="utf-8" ?>
< root >

   < message  id ="125" >
     < user > test </ user >
     < text > test </ text >
     < time > 2006-12-23 16:06:07 </ time >
   </ message >
</ root >

解决方案:/Files/fancystyle/chat.rar  

 

http://www.cnblogs.com/fancystyle/archive/2006/12/23/601669.html

这篇关于AJAX聊天室小DEMO(讨厌JS,IE下有问题已解决)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/697562。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
如何解决线上平台抽佣高 线下门店客流少的痛点！

如何解决线上平台抽佣高 线下门店客流少的痛点！

目前，许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流，但其费用昂贵。鉴于此，众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台，但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下，商家之间的合作网络逐渐成为一种有效的解决方案，通过资源和客户基础的共享，实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例，该平台融合了环保消费积分系统，在短
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...
缓存雪崩问题

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库，瞬间耗尽数据库资源，导致数据库无法使用。 解决方案： 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内，大量缓存数据同时失效，导致所有请求直接涌向数据库，瞬间增加数据库的负载压力，可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k
阅读更多...
6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

上篇：6.1.数据结构-c/c++模拟实现堆上篇（向下，上调整算法，建堆，增删数据）-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小)： 2.2 C语言代码（手写堆） 2.3 C++代码（使用优先级队列 priority_queue）
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2