好了,今天接着把昨天未完成的聊天室完成它,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 >
< 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(); // 把焦点设置到消息输入框
}
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
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
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()
% >
< ! -- #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()
% >
好了,这个简单的聊天室的代码就全部完成了,不过呢,这只是最基本的部分,这里呢没有实现多聊天室、用户注册登陆等部分,有兴趣的朋友可把这部分再完善一下。