ajax聊天室源码

最新推荐文章于 2021-08-05 17:49:32 发布
最新推荐文章于 2021-08-05 17:49:32 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 1.0 JavaScript Ajax asp.net 文章标签： 聊天 ajax function table application border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqscoke/article/details/1479050
版权
1.0 JavaScript 同时被 3 个专栏收录
61 篇文章 0 订阅
订阅专栏
asp.net
17 篇文章 0 订阅
订阅专栏
Ajax
4 篇文章 0 订阅
订阅专栏

前些天做了一个聊天室，基于XmlHttpRequest对象，使聊天不会刷新。用XmlDocument对象来保存聊天信息， 并保存至Application对象里面。客户端用Dom来解析聊天信息。Application对象还保存所有用户的所有聊天信息数量，在Session对象里面保存每个会话的聊天数量，每次会话判断Session和Application两个对象中的聊天数量之差Ｘ，并从Application中取出后面几条（Ｘ），并返回给客户端。

这是聊天的js文件

 

// 创建通用的xmlRequest对象
function  CreateXmlRequest() {   
    var xmlhttp_request = false;    
    try{     
            if( window.ActiveXObject ){          
              for( var i = 5; i; i-- ){             
                 try{                  
                     if( i == 2 ){
                        xmlhttp_request = new ActiveXObject( 

"Microsoft.XMLHTTP" );                       
                     }
                     else{
                        xmlhttp_request = new ActiveXObject( 

"Msxml2.XMLHTTP." + i + ".0" );    
                        

xmlhttp_request.setRequestHeader("Content-Type","text/xml");
                        

xmlhttp_request.setRequestHeader("Content-Type","gb2312");               

 
                     }
                        break;
                 }               
                 catch(e){  
                           xmlhttp_request = false;              
                 }          
              }       
            }
            else if( window.XMLHttpRequest ){           
                      xmlhttp_request = new XMLHttpRequest();           
                       if (xmlhttp_request.overrideMimeType) {           

    
                            

xmlhttp_request.overrideMimeType('text/xml');            
                       }       
                  }   
    }
                   catch(e)
                   {        
                        xmlhttp_request = false;   
                   }
           return xmlhttp_request ;
}



var  enterRoom = true ; // 标记用户是否第一次（刚刚）进入聊天室
var  isLoadingMsg = true ; // 标记是否已经加载聊天信息
var  myrequest = false ;
 // 获取聊天信息
function  getChatMessage() {
    isLoadingMsg=false;
    myrequest=CreateXmlRequest();
    
    xmlDom=new ActiveXObject("Microsoft.XMLDOM");//获取DOM对象
    xmlDom.async=false;//在HTML读取前加载
    myrequest.onreadystatechange=showChatMessage;
    xmlDomStr="<control>";
    xmlDomStr=xmlDomStr+"<enter>"+enterRoom+"</enter>";
    xmlDomStr=xmlDomStr+"</control>";
    xmlDom.loadXML(xmlDomStr);
    enterRoom=false;
    myrequest.open("POST","getXMLMessage.aspx?myDate="+new 

Date().getTime(),true);
    myrequest.send(xmlDom);

}

// 显示聊天信息
function  showChatMessage() {

    if(myrequest.readyState==4 ){  
        if(myrequest.status==200){ 
            isLoadingMsg=true;
            var myDom=myrequest.responseText;//获取返回ＸＭＬ数据
            msgDom=new ActiveXObject("Microsoft.XMLDOM");
            var msgDom=myrequest.responseXML;
            msgDom.loadXML(myDom);
        var strMessage="";
            //(msgDom!=null)&&
            if(myDom!=""){
                var 

messageNodes=msgDom.getElementsByTagName("message"); //获取所有message的结点
var chatmsgs=document.getElementById("ChatMessages");
orgMsg=chatmsgs.innerHTML;//获取原来的聊天信息
    for(i=0;i<messageNodes.length;i++){
                        msgNode=messageNodes(i);//获取message的结点
    //获取message结点下的元素
                     objText=msgNode.selectSingleNode("text").text;
    objText=Check(objText);
                     objUser=msgNode.selectSingleNode("user").text;
    objfont=msgNode.selectSingleNode("fontface").text;
                     objsize=msgNode.selectSingleNode("fontsize").text;
    objColor=msgNode.selectSingleNode("color").text;
    strMessage=strMessage+"<font face="+objfont+" size="+objsize+" 
color="+objColor+"><B>"+objUser+"</B>:"+objText+"</font><br>";
                }
                
                if(strMessage!=""){
                    strMessage=orgMsg+strMessage;
                    

document.getElementById("ChatMessages").innerHTML=strMessage;//累加
                }
                //chatmsgs.scrollIntoView(false);//窗口滚动为false;
            }
        }
    }
}

// 更新消息
function  updatechatMessage() {
    
    var chatmsg=document.getElementById("chatmsg");
    var checkedValue=chatmsg.value;
    var username=document.getElementById("username").value;
    if(checkedValue==""){
        errorToolTip("chatmsg","内容");
        return;
    }
    if(username==""){
        errorToolTip("username","用户名");
        return;
    }
    var color=document.getElementById("msgcolor").value;
    var fontsize=document.getElementById("chatFontSize").value;
    var fontface=document.getElementById("chatFont").value;
    if(chatmsg.value!=""){
        var strMessage=checkedValue;
        sendrequest=CreateXmlRequest();
        xmlDom=new ActiveXObject("Microsoft.XMLDOM");//获取DOM对象
        xmlDom.async=false;
        xmlDomStr="<message>";
        xmlDomStr=xmlDomStr+"<text>"+strMessage+"</text>";//获取发送的消息
        xmlDomStr=xmlDomStr+"<user>"+username+"</user>";//用户名
        xmlDomStr=xmlDomStr+"<fontsize>"+fontsize+"</fontsize>";
        xmlDomStr=xmlDomStr+"<fontface>"+fontface+"</fontface>";
        xmlDomStr=xmlDomStr+"<color>"+color+"</color>";
        xmlDomStr=xmlDomStr+"</message>";
        xmlDom.loadXML(xmlDomStr);
        sendrequest.onreadystatechange=getCountMsg;
        sendrequest.open("POST","updateXMLMessage.aspx",true);
        sendrequest.send(xmlDom);
        chatmsg.value="";//清空输入框        
    }
}


// 获取消息数量
function  getCountMsg() {
    if(sendrequest.readyState==4 ){ 
        if(sendrequest.status==200){
            

//document.getElementById("countMsg").innerHTML=sendrequest.responseText

;
        }
    }
}

var  oPopup  =  window.createPopup();
 function  errorToolTip(obj,obj2)
             {
            /*500 80*/
                var mytool=document.getElementById(obj);
                var toolTop= mytool.offsetTop;
                var toolLeft= mytool.offsetLeft+82;
                
                oPopup.document.body.innerHTML 

="<div><center><img src="/ShavelingChat/images/info.gif 

"></img></center><br><color=red>"+obj2+"不能为空！</color></div>"; 
                oPopup.show(toolLeft,toolTop , 80,80, 

chatmsg);
            }

function  Check(mytext) {
    var myvalue=ChangeFaceNoToImage(mytext);
    var reImg= new RegExp("(gif|jpg|png|jpeg|bmp)$", "");
    var isImg = reImg.test(myvalue);

    var reUrl=new RegExp("http://([/w-]+/.)+[/w-]+(/[/w- 

./?%&=]*)?", "");
    var isUrl = reUrl.test(myvalue);
    if(isImg==true && isUrl==true){
    //    [!CDATA[  ]>
        myvalue="<img src="+myvalue+"></img>";
    }
    return myvalue;
}


// 把表情代码转为图象
function  ChangeFaceNoToImage(ChatWord)
 {   
    for (var i = 0;i < 90;i ++)
    {
        var changeStr = "<img src="images/face/" + i + ".gif">";
        var pattern = new RegExp("/[face" + i + "/]");
        pattern.global = true;
        while (pattern.test(ChatWord))
        {
            ChatWord = ChatWord.replace(pattern,changeStr);
        }
    }
    return ChatWord;
}


// 添加表情
function  AddFace(FaceNo)
 {    
    document.getElementById("chatmsg").value += FaceNo;
    GetFocus();
    HideDiv();
}

// 聊天输入框聚焦
function  GetFocus()
 {
    document.getElementById("chatmsg").focus();
}



// 获取表情
function  Getface() {
var btnLeft=document.getElementById("faceBox").style.left;
    var tem=1;
    var falg=0;
        for(j=0;j<90;j++){
            falg=falg+1;
            if(falg>10){
            tem=tem+1;
            falg=1;
            }
            document.getElementById("Face"+tem).innerHTML += 

"<img src="images/face/" + j + ".gif" 

οnclick="javascript:AddFace('[face" + j + "]');" 

οnmοuseοut="javascript:this.style.border ='0';" 

οnmοuseοver="javascript:this.style.border ='1px solid';" alt="点击插

入表情"/>&nbsp;";
            
        }
        var handle=document.getElementById("faceBox");
        var pos = getPosition(handle);
        var t = pos.top;
        var l = pos.left;
        document.getElementById("mydownDiv").style.left=l-200;
        document.getElementById("mydownDiv").style.top=t+22;
        document.getElementById("mydownDiv").style.display="";
}


function  HideDiv() {
    document.getElementById("mydownDiv").style.display="none";
}

function  MyHideMsg() {
            

if(document.getElementById("mydownDiv").style.display==""){
            

      document.getElementById("mydownDiv").style.display="none";
        

        }
            
}

//  获取对象的坐标
function  getPosition(Obj)
 {
    var sumTop=0;
    var sumLeft=0;    
    while(Obj!=window.document.body) {
      sumTop+=Obj.offsetTop;
      if(Obj.tagName.toLowerCase()=='div') {
        sumTop-=Obj.scrollTop;
      }
      sumLeft+=Obj.offsetLeft;
      Obj=Obj.offsetParent;
    }
 return {left:sumLeft,top:sumTop}
}

这是ShavelingChat.html页面，这个页面杂杂的，其中有一段js代码是我用来访问Sina的Rss订阅获取当天的国内新闻，那段代码可以不用。因为我客户端处理Dom的时候有点问题，只能本地可以访问，其它机子连到主机就访问不了，只要把Dom对象弄成new ActiveXObject("Microsoft.XMLDOM");这个对象就可

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < HEAD >
         < title > asp.net javascript blog ajax 学习　视频　－－聊天室 </ title >
         < script  language ="javascript"  src ="/ShavelingChat/js/chat.js" ></ script >
         < style  type ="text/css" >  <!-- #Layer1  {  position : absolute ;  left : 319px ;  top : 158px ;  width : 537px ;  height : 298px ;  z-index : 1 ;  background-color :  #CCCCCC ;   }
    #Layer2  {  position : absolute ;  left : 277px ;  top : 106px ;  width : 189px ;  height : 155px ;  z-index : 1 ;  background-image :  url(images/leftye.gif) ;   }
    #Layer3  {  position : absolute ;  left : 301px ;  top : 159px ;  width : 546px ;  height : 274px ;  z-index : 2 ;   }
    #Layer4  {  position : absolute ;  left : 314px ;  top : 158px ;  width : 547px ;  height : 300px ;  z-index : 2 ;   }
    #ChatMessages  {  OVERFLOW :  auto ;  position : absolute ;  left : 282px ;  top : 146px ;  width : 613px ;  height : 318px ;  z-index : 2 ;   }
    #Layer6  {  position : absolute ;  left : 715px ;  top : 105px ;  width : 183px ;  height : 151px ;  z-index : 3 ;  background-image :  url(images/rightye.gif) ;   }
    #Layer7  {  position : absolute ;  left : 467px ;  top : 107px ;  width : 245px ;  height : 36px ;  z-index : 4 ;   }
    #Layer5  {  position : absolute ;  left : 68px ;  top : 117px ;  width : 166px ;  height : 176px ;  z-index : 5 ;  background-image :  url(images/heshang.gif) ;   }
    #Layer8  {  position : absolute ;  left : 49px ;  top : 26px ;  width : 200px ;  height : 60px ;  z-index : 6 ;  background-image :  url(images/heshang1.gif) ;   }
    #Layer9  {  position : absolute ;  left : 47px ;  top : 26px ;  width : 163px ;  height : 49px ;  z-index : 6 ;  background-image :  url(images/email_lqsocke.gif) ;   }
    #myRssReader  {  position : absolute ;  overflow : hidden ;  left : 300px ;  top : 1px ;  width : 599px ;  height : 96px ;  z-index : 7 ;   }
    #Layer10  {  position : absolute ;  left : 16px ;  top : 674px ;  width : 872px ;  height : 60px ;  z-index : 12001 ;   }
    --> </ style >
     </ HEAD >
     < BODY  leftMargin ="0"  topMargin ="0"  onload ="Getface()"  marginheight ="0"  marginwidth ="0"
        width ="100%" >
         < div  id ="Layer2" ></ div >
         < FONT  face ="宋体" ></ FONT >
         < div  id ="Layer10" >
             < P >
                系统提示： < br >
                1.您可以复制网上图片的ＵＲＬ地址，发送这个ＵＲＬ地址，会自动帮你解析该图片地址，显示出来! < br >
                2.上面的新闻信息，是访问新浪的RSS新闻订阅，涉及到跨站点访问，ＩＥ会自动提示！ < BR  />
                3.按Ctrl+回车可发送消息！
             </ P >
         </ div >
         < FONT  face ="宋体" ></ FONT >< FONT  face ="宋体" ></ FONT >< FONT  face ="宋体" ></ FONT >
         < div  id ="Layer5" ></ div >
         < div  id ="Layer9" ></ div >
         < div  id ="myRssReader" ></ div >
         < div  id ="ChatMessages" >< font  size ="8" ></ font ></ div >
         < div  id ="Layer6" ></ div >
         < div  id ="Layer7" > 用户名：  < input  id ="username"  type ="text"  size ="9"  name ="text" >
         </ div >
         < TABLE  id ="Table1"  height ="97"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  background ="images/menu_bg.gif"
            border ="0" >
             < TBODY >
                 < TR >
                     < TD >
                         < TABLE  id ="Table2"  cellSpacing ="0"  cellPadding ="0"  width ="900"  border ="0" >
                             < TBODY >
                                 < TR >
                                     < TD  width ="298" >< IMG  src ="images/logo.gif"  border ="0" ></ TD >
                                     < TD  vAlign ="top"  align ="left"  width ="602" > &nbsp; </ TD >
                                 </ TR >
                             </ TBODY ></ TABLE >
                     </ TD >
                 </ TR >
             </ TBODY ></ TABLE >
         < TABLE  id ="Table3"  height ="575"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  background ="images/kkk_13.gif"
            border ="0" >
             < TBODY >
                 < TR >
                     < TD  vAlign ="top" >
                         < TABLE  id ="Table4"  cellSpacing ="0"  cellPadding ="0"  width ="1000"  border ="0" >
                             < TBODY >
                                 < TR >
                                     < TD  width ="276" >< IMG  src ="images/img01.gif"  border ="0" ></ TD >
                                     < TD  vAlign ="bottom"  width ="624" >
                                         < TABLE  id ="Table5"  cellSpacing ="0"  cellPadding ="0"  width ="624"  border ="0" >
                                             <!-- DWLayoutTable -->
                                             < TBODY >
                                                 < TR >
                                                     < TD  width ="624"  height ="362" > &nbsp; </ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD  vAlign ="top"  height ="37" >
                                                         < table  id ="Table6"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
                                                             <!-- DWLayoutTable -->
                                                             < tr  align ="center" >
                                                                 < td  width ="624"  height ="37" > 字体：
                                                                     < SELECT  id ="chatFont"  name ="chatFont" >
                                                                         < option  value ="宋体"  selected > 宋体 </ option >
                                                                         < option  value ="仿宋体" > 仿宋体 </ option >
                                                                         < option  value ="楷体" > 楷体 </ option >
                                                                         < option  value ="黑体" > 黑体 </ option >
                                                                     </ SELECT > &nbsp;   < input  type ="button"  value ="清屏"  onclick ="clearMsg()" >  颜色：
                                                                     < SELECT  id ="msgcolor"  name ="usercolor" >
                                                                         < option  value ="red"  selected > 红色 </ option >
                                                                         < option  value ="yellow" > 黄色 </ option >
                                                                         < option  value ="green" > 绿色 </ option >
                                                                         < option  value ="blue" > 蓝色 </ option >
                                                                     </ SELECT >
                                                                     &nbsp; 字号：
                                                                     < SELECT  id ="chatFontSize"  name ="chatFontSize" >
                                                                         < option  value ="4pt"  selected > 4 </ option >
                                                                         < option  value ="5pt" > 5 </ option >
                                                                         < option  value ="6pt" > 6 </ option >
                                                                         < option  value ="7pt" > 7 </ option >
                                                                         < option  value ="8pt" > 8 </ option >
                                                                         < option  value ="9pt" > 9 </ option >
                                                                         < option  value ="10pt" > 10 </ option >
                                                                     </ SELECT > &nbsp;   < input  id ="faceBox"  onclick ="Getface()"  type ="button"  value ="表情"  name ="faceBox" ></ td >
                                                             </ tr >
                                                         </ table >
                                                     </ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD  align ="left" >
                                                         < TABLE  id ="Table7"  cellSpacing ="0"  cellPadding ="0"  border ="0" >
                                                             <!-- DWLayoutTable -->
                                                             < TBODY >
                                                                 < TR >
                                                                     < TD  height ="97" >< IMG  src ="images/tourist-01.gif"  border ="0" ></ TD >
                                                                     < TD ></ TD >
                                                                     < TD >< IMG  src ="images/line-point.gif"  border ="0" ></ TD >
                                                                     < TD ></ TD >
                                                                     < TD ></ TD >
                                                                     < td  vAlign ="top"  width ="587" >
                                                                         < table  id ="Table8"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
                                                                             <!-- DWLayoutTable -->
                                                                             < tr >
                                                                                 < td  vAlign ="bottom"  align ="left"  width ="587"  height ="97" > &nbsp;&nbsp;&nbsp;&nbsp;   < textarea  id ="chatmsg"  style ="WIDTH: 500px; HEIGHT: 80px"  name ="chatmsg"  onKeyDown ="submitMsg()"
                                                                                        onclick ="MyHideMsg()" ></ textarea >< INPUT  id ="Button1"  onclick ="updatechatMessage()"  type ="button"  value ="发送"  name ="Send" ></ td >
                                                                             </ tr >
                                                                         </ table >
                                                                     </ td >
                                                                 </ TR >
                                                             </ TBODY ></ TABLE >
                                                     </ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD >< IMG  src ="images/notice-bottom.gif"  align ="bottom"  border ="0" ></ TD >
                                                 </ TR >
                                             </ TBODY ></ TABLE >
                                     </ TD >
                                     < TD  vAlign ="top" >
                                         < TABLE  id ="Table9"  cellSpacing ="0"  cellPadding ="0"  border ="0" >
                                             < TBODY >
                                                 < TR >
                                                     < TD  height ="92" ></ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD ></ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD ></ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD ></ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD ></ TD >
                                                 </ TR >
                                                 < TR >
                                                     < TD  width ="92" ></ TD >
                                                 </ TR >
                                             </ TBODY ></ TABLE >
                                     </ TD >
                                 </ TR >
                             </ TBODY ></ TABLE >
                     </ TD >
                 </ TR >
             </ TBODY ></ TABLE >
         < TABLE  id ="Table10"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
             < TBODY >
                 < TR >
                     < TD  background ="images/bottombgcol.gif"  border ="0" >
                         < TABLE  id ="Table11"  cellSpacing ="0"  cellPadding ="0"  width ="1000"  border ="0" >
                             < TBODY >
                                 < TR >
                                     < TD >< IMG  src ="images/bottom.gif"  border ="0" ></ TD >
                                 </ TR >
                             </ TBODY ></ TABLE >
                     </ TD >
                 </ TR >
             </ TBODY ></ TABLE >
         < script  event ="onLoad"  for ="window" >
        document.getElementById( " myRssReader " ).innerHTML = " <center> " + " <img src="/ShavelingChat/images/scrll.gif "></img> " + " <br>使用新浪的ＲＳＳ订阅！</center> " ;
        ShowRSS();
    setInterval( " getChatMessage() " , 100 );
    document.getElementById( " ChatMessages " ).innerHTML = " <B>和尚洗漂柔－聊天室：欢迎您光临！<br> " ;
     // document.getElementById("myRssReader").innerHTML="<center><input type=button value="单击获取新浪的ＲＳＳ订阅！" οnclick="javascript:ShowSinaNews();"></center>";
     // ShowRSS();
         </ script >
         < script  language ="javascript" >
             function  ShowSinaNews(){
                ShowRSS();
            }
         </ script >
         < div  id ="mydownDiv"  style ="BORDER-RIGHT: #333333 2px solid; PADDING-RIGHT: 4px; BORDER-TOP: #333333 2px solid; DISPLAY: none; PADDING-LEFT: 4px; LEFT: 600px; OVERFLOW-X: hidden; PADDING-BOTTOM: 4px; SCROLLBAR-HIGHLIGHT-COLOR: #9999cc; OVERFLOW: scroll; BORDER-LEFT: #333333 2px solid; WIDTH: 300px; SCROLLBAR-ARROW-COLOR: white; PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; SCROLLBAR-BASE-COLOR: #cccccc; POSITION: absolute; TOP: 342px; HEIGHT: 180px; BACKGROUND-COLOR: #e4e4e4" >
             < table  id ="mytable"  onblur ="HideDiv();"  height ="300"  width ="250"  border ="0" >
                 < tr >
                     < td >
                         < div  id ="face1" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face2" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face3" >< FONT  face ="宋体" ></ FONT ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face4" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face5" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face6" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face7" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face8" ></ div >
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < div  id ="face9" ></ div >
                     </ td >
                 </ tr >
             </ table >
         </ div >
         < div  id ="doing"  style ="Z-INDEX: 12000; LEFT: 0px; VISIBILITY: hidden; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%"
            runat ="server" >
             < table  id ="myRssTable"  height ="100%"  width ="100%" >
                 < tr  vAlign ="middle"  align ="center" >
                     < td >
                         < table  id ="Table13"  style ="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px"  height ="62"
                            width ="169"  bgColor ="#99cccc" >
                             < tr  vAlign ="middle"  align ="center" >
                                 < td >
                                     < div  id ="mymessage" > 正在访问新浪ＲＳＳ新闻订阅... </ div >
                                    . < br >
                                     < IMG  alt ="loading...."  src ="/ShavelingChat/images/loading.gif"  align ="middle"  border ="0" > . </ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
             </ table >
         </ div >
         < script >
var  xmlHttp;
 function  ShowRSS() {
 var  target = " http://rss.sina.com.cn/news/marquee/ddt.xml " ;
readRSS(target);
}
 function  createXMLHttpRequest() {
     if  (window.ActiveXObject) {
        xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
    } 
     else   if  (window.XMLHttpRequest) {
        xmlHttp  =   new  XMLHttpRequest();
    }
}
    
 function  readRSS(url) {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange  =  handleStateChange;
    xmlHttp.open( " GET " , url,  true );
    xmlHttp.send( null );
}
    
 function  handleStateChange() {

　 if (xmlHttp.readyState  ==   1 ) {
　         var  divc = document.getElementById( " myRssTable " );
        document.getElementById( " myRssReader " ).innerHTML  =  divc.innerHTML;
    }
     if (xmlHttp.readyState  ==   4 ) {
         if (xmlHttp.status  ==   200 ) {
           clearPreviousResults();
          parseResults();
        }
  　}
}

 function  clearPreviousResults() {
     var  ListBody  =  document.getElementById( " myRssReader " );
     while (ListBody.childNodes.length  >   0 ) {
        ListBody.removeChild(ListBody.childNodes[ 0 ]);
    }
}

 function  parseResults() {
     var  results = new  ActiveXObject( " Microsoft.XMLDOM " );
    results  =  xmlHttp.responseXML;
     var  title  =   null ;
     var  link = null ;
     var  item  =   null ;
     var  items  =  results.getElementsByTagName( " item " );

     var  allNews = "" ;
     var  partNews = "" ;
     for ( var  i  =   0 ; i  <  items.length; i ++ ) {
        item  =  items[i];
        partNews = "" ;
        title  =  item.getElementsByTagName( " title " )[ 0 ].firstChild.nodeValue;
        link = item.getElementsByTagName( " link " )[ 0 ].firstChild.nodeValue;
        partNews = partNews + " <a href= " + link + " > " + title + " </a></br> "
        allNews = allNews + partNews;        
    }
    allNews = " <MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=1 scrollDelay=80 direction=up> " + allNews + " </MARQUEE> " ;
    document.getElementById( " myRssReader " ).innerHTML = allNews;
}
         </ script >
         < script >
function  submitMsg(){
     if (event.ctrlKey  &&  event.keyCode == 13 ){
        updatechatMessage();
    }
}

 function  clearMsg(){
    document.getElementById( " ChatMessages " ).innerHTML = "" ;
}


         </ script >
     </ BODY >
</ html >

这个getXMLMessage.aspx的页面，这个页面用来接收客户端的请求，返回该用户在Application对象中没有的聊天信息的XML片段。

 

using  System;
 using  System.Collections;
 using  System.ComponentModel;
 using  System.Data;
 using  System.Drawing;
 using  System.Web;
 using  System.Web.SessionState;
 using  System.Web.UI;
 using  System.Web.UI.WebControls;
 using  System.Web.UI.HtmlControls;
 using  System.Xml;

 namespace  ShavelingChat
 {
    /// <summary>
    /// getXMLMessage 的摘要说明。
    /// </summary>
    public class getXMLMessage : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!IsPostBack)
            {
            
                //Application中的Xml
                XmlDocument serverXml=(XmlDocument)Application["serverMsg"];
                
                //客户端的XML
                XmlDocument clientXml=new XmlDocument ();
                clientXml.Load(Request.InputStream);

                //获取用户是否刚进入
                string isEnter=clientXml.DocumentElement.SelectSingleNode("enter").InnerText;//FirstChild.Value;
                //如果是第一次进入，则添加系统的消息
                if((isEnter=="true"||isEnter.Equals("true")))
                {
                    string systemMsg="<message>";
                    systemMsg+="<text>系统信息:欢迎您来到和尚洗漂柔聊天室,祝您聊得天心!</text>";
                    systemMsg+="<user>管理员</user>";

                    systemMsg+="<fontface>宋体</fontface>";
                    systemMsg+="<fontsize>5pt</fontsize>";

                    systemMsg+="<color>Red</color>";
                    systemMsg+="</message>";
            
                    XmlDocument tempXml=new XmlDocument ();
                    tempXml.LoadXml(systemMsg);

                    XmlNode msg=serverXml.ImportNode(tempXml.DocumentElement,true);
                    serverXml.DocumentElement.AppendChild(msg);
                    Application["serverMsg"]=serverXml;
                Session["clientLine"]=1;

                }
            string myxml=" ";
                int clientLine=Convert.ToInt32(Session["clientLine"]);
                int serverLine=serverXml.DocumentElement.SelectNodes("message").Count;
                if(clientLine<serverLine)
                {
                    XmlNodeList allServerList=serverXml.DocumentElement.SelectNodes("message");
                    

                    for(;clientLine<serverLine;clientLine++)
                    {
                        myxml+="<message>"+allServerList[clientLine].InnerXml+"</message>";
                    }

                    myxml="<chatroom>"+myxml+"</chatroom>";
                    
                    Session["clientLine"]=serverLine;//重置消息总数
                    
                }

                    Response.Write (myxml);
                    Response.End();
            }
        }

        Web 窗体设计器生成的代码
    }
}

这个是updateXMLMessage.aspx页面，用来将用户发送的消息，添加到Application对象中。

using  System;
 using  System.Collections;
 using  System.ComponentModel;
 using  System.Data;
 using  System.Drawing;
 using  System.Web;
 using  System.Web.SessionState;
 using  System.Web.UI;
 using  System.Web.UI.WebControls;
 using  System.Web.UI.HtmlControls;
 using  System.Xml;
 using  System.IO;

 namespace  ShavelingChat
 {
    /// <summary>
    /// updateXMLMessage 的摘要说明。
    /// </summary>
    public class updateXMLMessage : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!IsPostBack)
            {

                //客户端的XML
                XmlDocument clientXml=new XmlDocument ();
                clientXml.Load(Request.InputStream);
                
                XmlDocument serverXml=(XmlDocument)Application["serverMsg"];

                string clientStr=clientXml.InnerXml;
                XmlDocument tempDoc=new XmlDocument ();
                tempDoc.LoadXml(clientStr);
                XmlNode msg=serverXml.ImportNode(tempDoc.DocumentElement,true);
                serverXml.DocumentElement.AppendChild(msg);
                Application["serverMsg"]=serverXml;
                

            }
        }

        Web 窗体设计器生成的代码
    }
}

最后在Global.asax.cs这个页面中添加如下代码用于实使化该聊天信息的XmlDocument对象，当然也不一定要在这里做。。。

protected   void  Application_Start(Object sender, EventArgs e)
        {
            XmlDocument dom = new  XmlDocument ();
             string  appMsg = " <chatroom></chatroom> " ;
            dom.LoadXml(appMsg);
            Application[ " serverMsg " ] = dom;
        }

 

最后还有一段访问Rss的新闻订阅的代码贴一下。。。
var  xmlHttp;
 function  ShowRSS() {
 var  target = " http://rss.sina.com.cn/news/marquee/ddt.xml " ;
readRSS(target);
}
 function  createXMLHttpRequest() {
     if  (window.ActiveXObject) {
        xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
    } 
     else   if  (window.XMLHttpRequest) {
        xmlHttp  =   new  XMLHttpRequest();
    }
}
    
 function  readRSS(url) {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange  =  handleStateChange;
    xmlHttp.open( " GET " , url,  true );
    xmlHttp.send( null );
}
    
 function  handleStateChange() {
 /*
　if(xmlHttp.readyState == 1) {
　        var divc=document.getElementById("myRssTable");
        document.getElementById("myRssReader").innerHTML = divc.innerHTML;
    }
     */
     if (xmlHttp.readyState  ==   4 ) {
         if (xmlHttp.status  ==   200 ) {
            //  clearPreviousResults();
             // parseResults();
        }
  　}
}

 function  clearPreviousResults() {
     var  ListBody  =  document.getElementById( " myRssReader " );
     while (ListBody.childNodes.length  >   0 ) {
        ListBody.removeChild(ListBody.childNodes[ 0 ]);
    }
}

 function  parseResults() {
    alert( " go to this " );
     var  results = new  ActiveXObject( " Microsoft.XMLDOM " );
    results  =  xmlHttp.responseXML;
     var  title  =   null ;
     var  link = null ;
     var  item  =   null ;
     var  items  =  results.getElementsByTagName( " item " );

     var  allNews = "" ;
     var  partNews = "" ;
     for ( var  i  =   0 ; i  <  items.length; i ++ ) {
        item  =  items[i];
        partNews = "" ;
        title  =  item.getElementsByTagName( " title " )[ 0 ].firstChild.nodeValue;
        alert(title);
        link = item.getElementsByTagName( " link " )[ 0 ].firstChild.nodeValue;
        partNews = partNews + " <a href= " + link + " > " + title + " </a></br> "
        allNews = allNews + partNews;        
    }
    allNews = " <MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=1 scrollDelay=80 direction=up> " + allNews + " </MARQUEE> " ;
    document.getElementById( " myRssReader " ).innerHTML = allNews;
}

总结：以目前这些代码只适合很小型的聊天，因为代码中还有很多Bug.我有测试过30台机子一起连上的时候，定时访问服务器SetInteval就要设计为2000也就是两秒访问一次，还有Application没有定时清掉那些消息，因为聊天信息越来越多，Application对象就会慢慢膨涨，服务器负担也会变大，还有那个表情做得不太好，每次点一下都要先加载图片，所以点一下要等一两秒才出来，其实把那个放到全局变量就可以解决了。就写到这了。。开会去了。

lqscoke
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax聊天室(附全部源码)
05-20
Ajax聊天室,附全部源码,相信对你学习Ajax有非常大的帮助
ajax聊天室源代码,AJAX初级聊天室代码
weixin_36182568的博客
08-05 141
程序代码var nowNum = "m"function getId(objId){return document.getElementById(objId)}function getName(objName){return document.getElementsByName(objName)[0]}var xmldocfunction createxmldoc(){if(window.XML...
AJax聊天室 Jsp课程设计 源代码（完整版）
06-22
1、用户登录：查询是否注册用户，若不是进行用户注册。 2、用户注册：用户信息输入，连接数据库，注册用户。 3、在线用户：从在线用户数据集中读取或删除用户。 4、发表用户：选择聊天内容格式设置，发表聊天内容，私聊、公聊选择。 5、聊天内容：从Application里读取公聊和私聊的内容。 6、退出：退出聊天系统。
Ajax聊天室源代码
09-12
Ajax聊天源码 自动区分用户名 不能用重名的用户登录
ajax聊天室源代码,Web实时聊天室源码
weixin_34942785的博客
08-05 139
用纯js通过长轮询来实现前端用Jquery ajax来实现1 $(function () {2 window.polling = {3 ///长连接地址4 connectionUrl: "/channel/polling",5 ///发送方式6 ...
Ajax 聊天室源码
11-12
**Ajax 聊天室源码详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，极大地提升了用户...
Ajax聊天室源码
12-30
Ajax聊天室源码是一种基于Ajax技术实现的在线实时交流平台的程序代码，它允许用户无需刷新页面即可进行实时的消息发送和接收。这个源码的核心在于使用了Ajax（Asynchronous JavaScript and XML）技术，这是一种在...
简单的ajax聊天室
08-31
最简单的ajax聊天室，适合刚学习ajax的朋友。最简单的ajax聊天室，适合刚学习ajax的朋友。最简单的ajax聊天室，适合刚学习ajax的朋友。最简单的ajax聊天室，适合刚学习ajax的朋友。
江湖聊天室源码
05-05
江湖聊天室源码是一款基于ASP技术构建的在线聊天平台，为用户提供了一个实时交流的互动空间。ASP（Active Server Pages）是微软开发的一种服务器端脚本环境，主要用于动态网页的生成。这款源码允许开发者和爱好者...
基于ajax的web聊天室
12-05
这是一个利用ajax技术写的简易版web聊天室，喜欢ajax的朋友可以看看，走过路过机会不要错过，人民币有限，技术无极限，男人有了钱，跟谁都有缘，有了技术就等于有了钱。
ajax实现无刷新JSP聊天室+源代码
09-28
ajax实现无刷新JSP聊天室功能强大、聊天的时候页面没有刷新觉得好爽...
Java加Ajax的web网页聊天室程序源代码
02-04
直接导入MyEclipse中，发布启动Tomcat，即可运行！！ 只是个简单的例子而已，希望能给大家带来帮助！！ 你们下载了，我怎么积分都不加呢！？下不下对我都没影响，算了，说分高了，就不用下了啊！省的说哈！！
Ajax实现前端聊天室
06-10
Ajax实现网页聊天室源码。运行环境，eclipse，tomcat7.0.
AJAX的高效聊天室源码
01-04
AJAX的高效聊天室源码，是用ajax做的
利用Ajax实现的实用聊天室源码
10-16
利用Ajax实现的实用聊天室源码 利用Ajax实现的实用聊天室源码
asp.net ajax聊天室,ASP.NET MVC4异步聊天室的示例代码
weixin_39861669的博客
08-05 287
本文介绍了ASP.NET MVC4异步聊天室的示例代码，分享给大家，具体如下：类图:Domain层IChatRoom.csusing System;using System.Collections.Generic;namespace MvcAsyncChat.Domain{public interface IChatRoom{void AddMessage(string message);void...
ajax聊天室
qq_37171379的博客
04-04 276
1.分析 买火车票，在电脑上下单，在手机上支付宝支付，支付成功后，电脑上也显示支付成功。 利用”反向推技术”。 电脑浏览器定时向服务器发起请求判断车票是否有付款。 反向推技术就是轮询技术，在客户端每间隔一定时间就去完成一定的任务。 在电脑浏览器上，当下完单之后，就每间隔2s就去服务器查看下是否有付款，当通过手机付款成功后，电脑浏览器自然也就会感知到。 2.及时显示聊天内容 避免获得重复聊天内容：...
php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
weixin_34706684的博客
03-09 1644
通过ajax和setInterval()函数，配合php+mysql实现一个简单的在线聊天室的功能。附带详细源码案例。这个聊天室是一个简单的聊天室，通过javascript setInterval()和ajax函数，不停的去获取服务器获取最新的聊天数据信息，并无刷新的写入到前台DOM中，来实现在线聊天的功能，这是一个比较笨的方法实现在线聊天室功能，不建议用于实际项目中。html代码：实现一个简单的...
AJAX(五)--聊天室
qq_32110825的博客
10-03 621
ajax聊天室1 消息的接收ajax/talk 1.获取服务器消息 window.onload = function() { //每隔2秒获取消息 setInterval(GetMsg, 2000); }; //获取信息 function GetMsg() { var xhr = new XMLHttpRequest(); var msg = docu

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值