本篇文章主要讲解php+ajax搭建简易聊天室实践,文中有关php,ajax的内容,有需要的小伙伴参考下。

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" style="text/css" href="./css/talk.css" /> <script type="text/javascript"> var maxID = 0; //获取最新的聊天消息 function showmsg(){ //ajax去获取 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ eval("var jn_info="+xhr.responseText); //<p style="color:#800080">恶魔 对 大家 微笑 说:好久不见了啊(22:05:35)</p> var s = ""; for(var i=0; i<jn_info.length; i++){ s += "<p style='color:"+jn_info[i].color+"'>"+jn_info[i].sender+" 对 "; s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说:"; s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>"; //把已经获取的最大id值赋予给maxID maxID = jn_info[i].id; } var hm =document.getElementById('show_msg'); hm.innerHTML += s; //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条:css: height:327px; overflow:auto;) hm.scrollTop = hm.scrollHeight; //滚动条始终在最下方。scrolltop表示滚动条卷起的高度,scrollheight是整个div的高度。 } } xhr.open('get','./data.php?maxID='+maxID); xhr.send(null); } //页面加载完毕就要显示最新聊天消息 window.onload = function(){ //每间隔2s就执行一次 setInterval("showmsg()",2000); } </script> <style type="text/css"> </style> </head> <body> <div id="main"> <div id="left"> <h2>在线名单:(5人)</h2> <ul id="user"> <li>帅哥:恶魔</li> <li>靓妹:甜甜</li> <li>帅哥:诸葛</li> <li>帅哥:成就梦想</li> <li>靓妹:郁金香</li> </ul> <ul id="anniu"> <li><input type="button" value="刷新名单" ></li> <li><input type="button" value="刷新屏幕" ></li> <li><input type="button" value="退出聊天" ></li> </ul> </div> <div id="right"> <div id="content"> <h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2> <hr /> <div id="show_msg"> <p style="color:red">PHP爱好者聊天室公告:欢迎恶魔来到聊天室(22:05:35)</p> <p>恶魔 对 大家 微笑 说:对啊(22:05:35)</p> <p>恶魔 对 大家 微笑 说:对啊(22:05:35)</p> <p style="color:#800080">恶魔 对 大家 微笑 说:好久不见了啊(22:05:35)</p> <p style="color:red">PHP爱好者聊天室公告:欢迎天使来到聊天室(22:05:35)</p> <p>天使 对 大家 微笑 说:你来了啊(22:05:35)</p> </div> </div> <div id="send"> <form> <div id="control"> 颜色: <select id="color" name="color"> <option value="">请选择</option> <option style="color:#FF8888" value="#FF8888">爱的暗示</option> <option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option> <option style="color:#0000FF" value="#0000FF">碧空蓝天</option> <option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option> <option style="color:#000088" value="#000088 ">蔚蓝海洋</option> <option style="color:#77FFEE" value="#77FFEE">清清之蓝</option> <option style="color:#4400B3" value="#4400B3">发亮篮紫</option> <option style="color:#A500CC" value="#A500CC">紫的拘谨</option> <option style="color:#B088FF" value="#B088FF">卡其制服</option> <option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option> <option style="color:#DC143C" value="#DC143C">卡布其诺</option> <option style="color:#A52A2A" value="#A52A2A">苦涩心红</option> <option style="color:#FF0000" value="#FF0000">正宗喜红</option> <option style="color:#990099" value="#990099">红的发紫</option> <option style="color:#FF0000" value="#FF0000">红旗飘飘</option> <option style="color:#D2691E" value="#D2691E ">黄金岁月</option> <option style="color:#800080" value="#800080">紫金绣贴</option> <option style="color:#006400" value="#006400">橄榄树绿</option> <option style="color:#000000" value="#000000">绝对黑色</option> </select> 表情: <select id="biaoqing" name="biaoqing"> <option value="">请选择</option> <option value="笑着">笑着</option> <option value="高兴地">高兴地</option> <option value="含情脉脉">含情脉脉</option> <option value="微笑">微笑</option> <option value="幸福">幸福</option> <option value="有点脸红">有点脸红</option> <option value="使劲安慰">使劲安慰</option> <option value="自言自语">自言自语</option> <option value="差点要哭">差点要哭</option> <option value="嚎啕大哭">嚎啕大哭</option> <option value="一把鼻涕">一把鼻涕</option> <option value="很无辜">很无辜</option> <option value="流口水">流口水</option> <option value="神秘兮兮">神秘兮兮</option> <option value="幸灾乐祸">幸灾乐祸</option> <option value="很不服气">很不服气</option> <option value="不怀好意">不怀好意</option> <option value="拳打脚踢">拳打脚踢</option> <option value="不知所措">不知所措</option> <option value="翻箱倒柜">翻箱倒柜</option> <option value="很遗憾">很遗憾</option> <option value="很严肃">很严肃</option> <option value="善意警告">善意警告</option> <option value="正气凛然">正气凛然</option> <option value="哈欠连天">哈欠连天</option> <option value="小声的">小声的</option> <option value="大声的">大声的</option> <option value="尖叫一声">尖叫一声</option> <option value="遗憾的">遗憾的</option> <option value="无精打采">无精打采</option> <option value="想吐">想吐</option> <option value="真诚">真诚</option> <option value="不好意思">不好意思</option> <option value="扭捏的">扭捏的</option> <option value="腼腆的">腼腆的</option> <option value="很诧异">很诧异</option> <option value="依依不舍">依依不舍</option> </select> 聊天对象: <select id="receiver" name="receiver"> <option value="">所有的人</option> <option value="恶魔">恶魔</option> <option value="甜甜">甜甜</option> <option value="诸葛">诸葛</option> <option value="成就梦想">成就梦想</option> <option value="郁金香">郁金香</option> </select> <br /> <textarea id="msg" name="msg"></textarea> <input type="button" value="发送" onclick="sendmsg()" /> <span id="result"></span> </div> </form> </div> </div> </div> </body> </html> <script type="text/javascript"> function sendmsg(){ //发表聊天消息 FormData+Ajax合作 var fm = document.getElementsByTagName('form')[0]; var fd = new FormData(fm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ document.getElementById('result').innerHTML = xhr.responseText; //表单域信息归位 document.getElementById('color').value=""; document.getElementById('biaoqing').value=""; document.getElementById('receiver').value=""; document.getElementById('msg').value=""; //"留言成功"标志归位,2s后归位 setTimeout("guiflag()",2000); } } xhr.open('post','./send.php'); xhr.send(fd); } //"留言成功"标志归位 function guiflag(){ document.getElementById('result').innerHTML = ""; } </script>