一个简单的Asp+ajax聊天室(二) -优快云博客

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

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

chat.html

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无问的聊天室</title>
<scripttype="text/javascript"src="chat.js"></script>
<styletype="text/css">

</style>
</head>

<bodyonload="startChat();">
<H3>无的聊天室</H3>
<divid="chat"class="chat">

</div>
<formid="frmSend"name="frmSend"onsubmit="sendMess();returnfalse;">
<inputname="username"type="text"id="username"value="无问"size="10"/>
<inputname="mess"type="text"id="mess"size="100"/>
<inputtype="submit"value="send"id="submitsend"name="submitsend"/>
</form>
</body>
</html>

caht.js

varlastID="";//声明上次取回的消息的ID
varmGetTime;//设置setTimeout的返回值
//通过封装getAjax()方法创建XMLHTTPRequest对象
functiongetAjax()
{
varajax=false;
try{
ajax=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
ajax=newActiveXObject("Microsoft.XMLHTTP");
}catch(E){
ajax=false;
}
}
if(!ajax&&typeofXMLHttpRequest!='undefined'){
ajax=newXMLHttpRequest();
}
returnajax;
}

vargetMessReq=getAjax();//获取消息的XMLHTTPRequest对象
varsendMessReq=getAjax();//发送消息的XMLHTTPRequest对象

//发送消息的方法
functionsendMess()
{
//如果消息为空给出提示并返回
if(document.getElementById("mess").value==""){
alert("Youhavenotenteredamessage!");
document.getElementById("mess").focus();//把焦点设置到消息输入框
return;
}
//alert("");
vard=newDate();
//判断上次发送消息的状态,4:已发送,0:未发送
if(sendMessReq.readyState==4||sendMessReq.readyState==0){
//发送消息的服务器端地址
varsendUrl="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();//把焦点设置到消息输入框
}
}

functiongetMess()
{
vard=newDate();
if(getMessReq.readyState==4||getMessReq.readyState==0){
vargetUrl="getmess.asp?lastid="+lastID+"&d="+d.getTime();//从服务器返回消息的地址
getMessReq.open("POST",getUrl,true);//建立请求连接
getMessReq.onreadystatechange=function(){
if(getMessReq.readyState==4&&getMessReq.status==200){
varchatEL=document.getElementById("chat");
varmessXML=getMessReq.responseXML;//获得返回后的XML
varmessNodes=messXML.getElementsByTagName("message");
varmessCount=messNodes.length;
for(vari=0;i<messCount;i++){
varuserNode=messNodes[i].getElementsByTagName("user");
vartextNode=messNodes[i].getElementsByTagName("text");
vardateNode=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);
}
}

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

getmess.asp

Response.ContentType="application/xml"

Response.Charset="utf-8"

Session.CodePage=65001

dimrs

dimsql

dimlastid

lastid=Trim(Request.QueryString("lastid"))

setrs=Server.CreateObject("ADODB.Recordset")

iflastid=""orisnull(lastid)then

sql="select*from(selecttop50*frommessageorderbyiddesc)asmessageorderbyid"

else

sql="select*frommessagewhereid>"&lastid&"orderbyid"

endif

rs.opensql,conn,1,1

Response.Write("<?xmlversion=""1.0""encoding=""utf-8""?>")

Response.Write("<book>")

dowhilenotrs.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>")

Setrs=Nothing

conn.close

setconn=Nothing

send.asp

<%@LANGUAGE="VBSCRIPT"CODEPAGE="65001"%>

<%
dimusername,mess
username=Trim(Request.QueryString("username"))
mess=Trim(Request.QueryString("mess"))
conn.execute("insertintomessage(messtext,username)values('"&mess&"','"&username&"')")
callCloseConn()
%>

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