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

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

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

chat.html

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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 : #6666661pxsolid ; display : block ; margin-left : 5px ; margin-right : 5px ; height : 680px ; padding : 10px ; overflow-y : scroll ; }
.chat.usernamespan { 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();returnfalse;" >
< 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( " Youhavenotenteredamessage! " );
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 += ' <divclass="username">(<span> ' + userNode[ 0 ].firstChild.nodeValue + ' </span>)saidat<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
% >
< ! -- #includefile = " 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(selecttop50*frommessageorderbyiddesc)asmessageorderbyid "
else
sql = " select*frommessagewhereid> " & lastid & " orderbyid "
end if
rs.opensql,conn, 1 , 1
Response.Write( " <?xmlversion=""1.0""encoding=""utf-8""?> " )
Response.Write( " <book> " )
do while not rs.eof
Response.Write( " <messageid="" " & 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 " % >
< ! -- #includefile = " conn.asp " -->
< %
dim username,mess
username = Trim (Request.QueryString( " username " ))
mess = Trim (Request.QueryString( " mess " ))
conn.execute( " insertintomessage(messtext,username)values(' " & mess & " ',' " & username & " ') " )
call CloseConn()
% >

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