一个简单的Asp+ajax聊天室(二)

好了,今天接着把昨天未完成的聊天室完成它,lot's go

首先把完成的代码全贴出来:

chat.html

 

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无问的聊天室 </ title >
< script  type ="text/javascript"  src ="chat.js" ></ script >
< style  type ="text/css" >
<!--
.chat {  border : #666666 1px solid ;  display : block ;  margin-left : 5px ;  margin-right : 5px ;  height : 680px ;  padding : 10px ;  overflow-y : scroll ; }
.chat .username span { font-style : italic ; }
.caht .messtext { font-size : 20px ;  background-color : #CC66FF ; margin-top : 15px ;  height : 30px ;  line-height : 30px ;  display : block ; }
-->
</ style >
</ head >

< body  onload ="startChat();" >
< H3 > 无的聊天室 </ H3 >
< div  id ="chat"  class ="chat" >
<!-- 这里显示聊天信息 -->
</ div >
< form  id ="frmSend"  name ="frmSend"  onsubmit ="sendMess();return false;" >
     < input  name ="username"  type ="text"  id ="username"  value ="无问"  size ="10"   />
     < input  name ="mess"  type ="text"  id ="mess"  size ="100"   />
     < input  type ="submit"  value ="send"  id ="submitsend"  name ="submitsend"   />
</ form >
</ body >
</ html >

caht.js

 

var  lastID  =   "" ; // 声明上次取回的消息的ID
var  mGetTime; // 设置setTimeout的返回值
//  通过封装getAjax()方法创建XMLHTTPRequest对象
function  getAjax()
{
     var  ajax = false ; 
     try { 
        ajax  =   new  ActiveXObject( " Msxml2.XMLHTTP " ); 
    } catch (e){ 
         try { 
            ajax  =   new  ActiveXObject( " Microsoft.XMLHTTP " ); 
        } catch (E){ 
            ajax  =   false ; 
        } 
    }
     if ( ! ajax  &&   typeof  XMLHttpRequest != ' undefined ' ){ 
        ajax  =   new  XMLHttpRequest(); 
    } 
     return  ajax;
}

var  getMessReq  =  getAjax(); // 获取消息的XMLHTTPRequest对象
var  sendMessReq  =  getAjax(); // 发送消息的XMLHTTPRequest对象

// 发送消息的方法
function  sendMess()
{
     // 如果消息为空给出提示并返回
     if (document.getElementById( " mess " ).value == "" ){
        alert( " You have not entered a message! " );
        document.getElementById( " mess " ).focus(); // 把焦点设置到消息输入框
         return ;
    }
     // alert("");
     var  d  =   new  Date();
     // 判断上次发送消息的状态,4:已发送,0:未发送
     if (sendMessReq.readyState == 4   ||  sendMessReq.readyState  ==   0 ){
         // 发送消息的服务器端地址
         var  sendUrl  =   " send.asp?username= " + escape(document.getElementById( " username " ).value) + " &mess= " + escape(document.getElementById( " mess " ).value)  + " &d= " + d.getTime();
        sendMessReq.open( " POST " ,sendUrl, true ); // 建立请求连接
        sendMessReq.onreadystatechange  =   function (){ // 发送状态改变后调用的方法
            clearTimeout(mGetTime); // 停止自动获取消息
            getMess(); // 获取消息
        }
        sendMessReq.send( null ); // 发送请求
        document.getElementById( " mess " ).value  =   "" ; // 设置消息框为空
        document.getElementById( " mess " ).focus(); // 把焦点设置到消息输入框
    }
}


function  getMess()
{
     var  d  =   new  Date();
     if (getMessReq.readyState == 4   ||  getMessReq.readyState  ==   0 ){
         var  getUrl  =   " getmess.asp?lastid= " + lastID  +   " &d= " + d.getTime(); // 从服务器返回消息的地址
        getMessReq.open( " POST " ,getUrl, true ); // 建立请求连接
        getMessReq.onreadystatechange  =   function (){
             if (getMessReq.readyState == 4 && getMessReq.status == 200 ){
                 var  chatEL  =  document.getElementById( " chat " );
                 var  messXML  =  getMessReq.responseXML; // 获得返回后的XML
                 var  messNodes  =  messXML.getElementsByTagName( " message " );
                 var  messCount  =  messNodes.length;
                 for ( var  i  =   0  ; i  <  messCount ; i ++ ){
                     var  userNode  =  messNodes[i].getElementsByTagName( " user " );
                     var  textNode  =  messNodes[i].getElementsByTagName( " text " );
                     var  dateNode  =  messNodes[i].getElementsByTagName( " date " );
                    chatEL.innerHTML  +=   ' <div class="username">(<span> '   +  userNode[ 0 ].firstChild.nodeValue  +   ' </span>) said at <span> '   +  dateNode[ 0 ].firstChild.nodeValue  +   ' </span></div> ' ;
                    chatEL.innerHTML  +=   ' <div> '   +  textNode[ 0 ].firstChild.nodeValue  +   ' </div> ' ;
                    lastID  =  messNodes[i].getAttribute( " id " ); // 上次消息的ID
                    chatEL.scrollTop  =  chatEL.scrollHeight; // 滚动到最后一条消息
                }
                mGetTime  =  setTimeout( " getMess() " , 2000 ); // 每隔两秒从服务返回最新消息
            }
        }
        getMessReq.send( null );
    }
}

function  startChat()
{
    getMess();
    document.getElementById( " mess " ).focus(); // 把焦点设置到消息输入框
}

getmess.asp

 

< %
Response.ContentType = " application/xml "
Response.Charset = " utf-8 "
Session.CodePage = 65001
% >
< ! -- #include file = " conn.asp " -->
< %
     dim  rs
     dim  sql
     dim  lastid
    lastid  =   Trim (Request.QueryString( " lastid " ))
     set  rs  =  Server.CreateObject( " ADODB.Recordset " )
     if  lastid  =   ""   or   isnull (lastid)  then
        sql  =   " select * from (select top 50 * from message order by id desc) as message order by id "
     else
        sql  =   " select * from message where id >  " & lastid & "  order by id "
     end   if
    rs.open sql,conn, 1 , 1
    Response.Write( " <?xml version=""1.0"" encoding=""utf-8"" ?> " )
    Response.Write( " <book> " )
     do   while   not  rs.eof
    Response.Write( " <message id="" " & rs( " id " ) & " ""> " )
    Response.Write( " <user> " & rs( " username " ) & " </user> " )
    Response.Write( " <text> " & rs( " messtext " ) & " </text> " )
    Response.Write( " <date> " & rs( " date " ) & " </date> " )
    Response.Write( " </message > " )
    rs.movenext
     loop
    rs.close
    Response.Write( " </book> " )
     Set  rs  =   Nothing
    conn.close
     set  conn  =   Nothing
% >

 send.asp

 

< %@LANGUAGE = " VBSCRIPT "  CODEPAGE = " 65001 " % >
< ! -- #include file = " conn.asp " -->
< %
     dim  username,mess
    username  =   Trim (Request.QueryString( " username " ))
    mess  =   Trim (Request.QueryString( " mess " ))
    conn.execute( " insert into message(messtext,username) values(' " & mess & " ',' " & username & " ') " )
     call  CloseConn()
% >

 

好了,这个简单的聊天室的代码就全部完成了,不过呢,这只是最基本的部分,这里呢没有实现多聊天室、用户注册登陆等部分，有兴趣的朋友可把这部分再完善一下。