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

最新推荐文章于 2020-06-28 10:42:22 发布

最新推荐文章于 2020-06-28 10:42:22 发布 · 519 阅读

文章标签：

#Ajax #ASP #VBScript #JavaScript #CSS #ViewUI

本文介绍了一个使用ASP和Ajax技术实现的简单聊天室。该聊天室具备基本的消息发送功能，客户端通过Ajax异步发送消息至服务器端进行处理并保存至数据库。

用Asp+ajax来做一个简单的聊天室,今天先做发送消息部分

前台代码:

<!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>

<body>
<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>

JS代码chat.js:

//通过封装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!");
return;
}

//判断上次发送消息的状态,4:已发送,0:未发送
if(sendMessReq.readyState==4||sendMessReq.readyState==0){
//发送消息的服务器端地址
varsendUrl="send.asp?username="+escape(document.getElementById("username").value)+"&mess="+escape(document.getElementById("mess").value);
sendMessReq.open("POST",sendUrl,true);//建立请求连接
sendMessReq.onreadystatechange=function(){//发送状态改变后调用的方法
//还有一些代码明天再写
}

sendMessReq.send(null);//发送请求
document.getElementById("mess").value="";//设置消息框为空
}
}

保存消息的服务器端代码send.asp: