PHP& Ajax搭建简易聊天室

界面：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

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;

//设置p滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置p有滚动条：css： height:327px; overflow:auto;)

hm.scrollTop = hm.scrollHeight; //滚动条始终在最下方。scrolltop表示滚动条卷起的高度，scrollheight是整个p的高度。

}

xhr.open('get','./data.php?maxID='+maxID);

xhr.send(null);

}

//页面加载完毕就要显示最新聊天消息

window.onload = function(){

//每间隔2s就执行一次

setInterval("showmsg()",2000);

}

</script>

</style>

</head>

<body>

</ul>

</ul>

</p>

<h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2>

<hr />

<p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(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>

</p>

<form>

颜色：

</select>

表情：

</select>

聊天对象：

</select>

<br />

</p>

</form>

</p>

</body>

</html>

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>

**********************************************************************

后端，从数据库获取所有聊天信息：data.php

<?php

//随时获取最新的聊天消息

$link = mysql_connect('localhost','root','123456');

mysql_select_db('shop0811',$link);

mysql_query('set names utf8');

$maxID = $_GET['maxID'];

//获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)

$sql = "select * from message where id>".$maxID;

$qry = mysql_query($sql);

$info = array();

while($rst = mysql_fetch_assoc($qry)){

$info[] = $rst;

}

//把数据组织为二维数组

//把最新的聊天信息通过json格式提供出来

echo json_encode($info);

***********************************************************************************************

后端，将发送的聊天记录存入数据库:send.php

<?php

//发表聊天消息，服务器端

$link = mysql_connect('localhost','root','123456');

mysql_select_db('shop0811',$link);

mysql_query('set names utf8');

$msg = $_POST['msg'];

$receiver = $_POST['receiver'];

$color = $_POST['color'];

$biaoqing = $_POST['biaoqing'];

$sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())";

if(mysql_query($sql)){

echo "发表留言成功！";

}else{

echo "发表留言失败！";

}

*********************************************************************************************

talk.css（引入的外部CSS文件）:

* {margin:0;padding:0;border:0;}

#main {width:900px; height:500px; background:pink; margin:auto; margin-top:10px;}

#left {width:200px; height:500px;background:#F5DEB3; float:left;}

#right {width:700px; height:500px; background:rgb(206,263,49); float:left;}

#content {height:379px; padding-top:1px;}

#send {height:120px; background:rgb(51,175,234);}

#control {position:relative; left:75px; top:18px;}

select,textarea {border:1px solid gray;}

#msg {width:410px;height:52px; margin-top:5px;}

#content-title{color:green;font-size:14px;width:245px;margin:10px auto;}

hr {border:1px solid gray; width:600px; margin:auto;}

#show_msg {width:600px; margin-left:47px;margin-top:10px;font-size:14px;font-weight:bold;

height:327px;

overflow:auto;

}

#left h2 {color:#8B4513;font-size:14px;position:relative; left:36px;top:24px; width:150px; }

#left #user { position:relative; top:46px;left:48px; }

ul {font-size:12px; list-style:none; width:110px; }

#anniu {margin-top:280px; margin-left:50px; }

#anniu input {margin-top:3px; width:98px;height:30px; background:#CD853F; color:white; border:2px solidwhite;}

相关文章