好了,今天接着把昨天未完成的聊天室完成它,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">
<!--
.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>
<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
%>
<!--#includefile="conn.asp"-->
<%
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"%>
<!--#includefile="conn.asp"-->
<%
dimusername,mess
username=Trim(Request.QueryString("username"))
mess=Trim(Request.QueryString("mess"))
conn.execute("insertintomessage(messtext,username)values('"&mess&"','"&username&"')")
callCloseConn()
%>
好了,这个简单的聊天室的代码就全部完成了,不过呢,这只是最基本的部分,这里呢没有实现多聊天室、用户注册登陆等部分,有兴趣的朋友可把这部分再完善一下。
分享到:
相关推荐
【ASP+AJAX 无刷聊天室】是一个基于ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)技术构建的在线实时交流平台。这个系统允许用户在不刷新整个网页的情况下实现聊天功能,提高了用户体验,...
实现ASP+AJAX聊天室的关键步骤包括: 1. **服务器端处理**:ASP脚本接收客户端通过AJAX发送的聊天消息,将其存储到数据库。同时,它也会查询数据库以获取最新的聊天记录,准备返回给客户端。 2. **AJAX调用**:...
【ASP+Ajax聊天室源码】是一个用于构建在线聊天室的开发资源,它结合了ASP(Active Server Pages)和Ajax(Asynchronous JavaScript and XML)技术,以实现无刷新的交互体验。这个源码包含了详细的注释,使得开发者...
Ajax简易聊天室,运行于ASP环境,用Access存储聊天记录,本程序纯属为了学习,请不要当成功能强大的聊天室来用,呵呵,只是想研究一下Ajax练手的,实现了聊天室的基本雏形,可以无刷新发送消息,数据库定时更新,...
在"AjaxChat"这个文件名中,我们可以推测这是聊天室的主要程序文件或者一个包含聊天室功能的文件夹。可能包含HTML、ASP.NET页面(如.aspx)、JavaScript脚本(.js)、CSS样式表(.css)以及可能的服务器端代码文件...
文件名"制作一个简单的社区聊天室(AJAX)"可能包含以下内容: - HTML/CSS文件:构成用户界面,包括输入框、发送按钮和聊天消息列表。 - JavaScript文件:包含AJAX请求和DOM操作的代码。 - ASP.NET后台代码文件(如....
综上所述,"Ajax+ASP聊天室"项目涉及到前端与后端的深度集成,需要理解并掌握Ajax、ASP、JavaScript、数据库以及Web安全等相关技术,通过它们的协同工作,创造出一个交互性强、实时性好的在线聊天环境。
总的来说,这个聊天室项目展示了如何结合ASP、VBScript和AJAX(JQuery)来创建一个实时互动的Web应用程序。ASP处理服务器端逻辑,VBScript处理脚本,AJAX利用JQuery框架实现页面的无刷新更新,而ACCESS数据库则用于...
综上所述,“Asp.net+Ajax做的无刷新聊天室”项目展示了如何结合这两种技术来创建一个高效、实时且用户友好的Web应用。通过学习和实践此类项目,开发者可以提升在Web开发中的技能,特别是在构建交互式应用方面。
综上所述,创建一个ASP.NET+AJAX的无刷新聊天室涉及到前端与后端的紧密协作,包括异步通信、实时数据传输、用户界面设计和安全性管理等多个方面。通过熟练掌握这些技术,你可以构建出一个高效且用户体验良好的在线...
Asp.Net基于Ajax的无刷新聊天室,可以带来以下两点好处: ·页面实时更新,无需完全刷新页面; ·聊天内容更新时,只需要读取最新的聊天信息,做到“按需取数据”。 本项目将会实现以个基于Ajax的无刷新聊天室,其...
接下来,我们将深入探讨ASP和AJAX的核心概念以及如何结合使用它们来构建一个无刷新聊天室。 ASP,全称为Active Server Pages,是微软开发的一种服务器端脚本环境,用于创建动态网页和Web应用程序。ASP通过在服务器...
Asp.net+Ajax聊天室程序.这是用了半天时间给公司做个在线聊天室,数据库代码没在里面程序很简单,一个就知道数据库结构了,使用Ajax技术,做到了无刷新更新,对新手还是有点帮助的.演示地址 http://chatroom.fdc.com.cn/
开发语言为Asp,服务器脚本为VBScript; AJAX部分采用JQuery框架,...请保留作者版权信息,尽管不是什么大程序,但作者近期发现很多使用者连开发人都改成自己的名字,这既是对别人劳动成果的不尊重,也是一个人素质的体现
**Ajax+ASP无刷新聊天室**是Web开发中一种实现实时通信的技术应用,它结合了Ajax(Asynchronous JavaScript and XML)和ASP(Active Server Pages)技术,为用户提供了一个无需刷新页面即可更新信息的聊天环境,类似...
这是一个基于ASP.NET技术框架,并利用AJAX无刷新技术构建的聊天室系统源码。这个系统的核心特点是提供了一个实时通信的平台,用户可以在不刷新整个页面的情况下进行互动交流,提升了用户体验。 首先,我们来分析...
本例采用asp.net2.0+ajax技术实现,不用数据库,采取2.0新概念Dictionary、LinkedList集合实现数据的处理. 所有发送、接收、显示在线用户列表等皆采用ajax技术完成,实现无刷新聊天的功能 Ajax的核心是JavaScript...
【基于AJAX的简易聊天室】是一个利用现代Web技术实现的实时交互平台,它整合了AJAX、JSP、Servlet和MySQL数据库等关键技术,旨在提供一个简洁高效的在线沟通环境。AJAX(Asynchronous JavaScript and XML)是核心,...
综上所述,这个开源项目结合了前端的AJAX技术和后端的C# 3.5与SQL数据库,提供了一个实时、交互性强的Web聊天室。对于学习者而言,这是一个很好的实践案例,可以深入了解Web开发中的异步通信、数据库设计以及C#...
在ASP.NET中,我们可以创建一个ASP.NET Web Forms项目,用以构建聊天室的后端。这通常涉及到数据库设计,用于存储用户信息和聊天记录。例如,可以创建一个用户表来存储用户名、密码等信息,另一个表用于保存聊天消息...