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

 

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

前台代码:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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 : #666666 1px solid ;  display : block ;  margin-left : 5px ;  margin-right : 5px ;  height : 680px ;  padding : 10px ; }
-->
</ style >
</ head >

< body >
< H3 > 无的聊天室 </ H3 >
< div  id ="chat"  class ="chat" >
<!-- 这里显示聊天信息 -->
</ div >
< form  id ="frmSend"  name ="frmSend"  onsubmit ="sendMess();return false;" >
    
< 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 >

 

JS代码chat.js:

 

//  通过封装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(
" You have not entered a message! " );
        
return ;
    }
    
    
// 判断上次发送消息的状态,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);
        sendMessReq.open(
" POST " ,sendUrl, true ); // 建立请求连接
        sendMessReq.onreadystatechange  =   function (){ // 发送状态改变后调用的方法
             // 还有一些代码明天再写
        }
        
        sendMessReq.send(
null ); // 发送请求
        document.getElementById( " mess " ).value  =   "" ; // 设置消息框为空
    }
}

 

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

 

<% @LANGUAGE = " VBSCRIPT "  CODEPAGE = " 65001 " %>
<!-- #include file = " conn.asp " -->
<%
    dim username,mess
    username 
=  Trim(Request.QueryString( " username " ))
    mess 
=  Trim(Request.QueryString( " mess " ))
    conn.execute(
" insert into message(messtext,username) values(' " & mess & " ',' " & username & " ') " )
    conn.close()
       set conn = Nothing
%>

 

数据表:message

注意:要为date字段设置一个默认值:getDate()

请天就到这儿吧,明天接着写显示消息的部分,夜了,要睡觉觉了


版权声明:本文为wlkjhxd原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。