<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>ajax</title>
<link rel="stylesheet" href="./css/talk.css" type="text/css"/>
<style type="text/css">
</style>
<script type="text/javascript">
var maxID = 0;
function showmessage(){
//收集表单信息
//ajax负责把收集好的信息传递给服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
eval("var info="+xhr.responseText);
//alert("hello");
//alert(typeof info);
var s = "";
for (var i = 0; i < info.length; i++) {
s += "<p style='color:"+info[i].color+"'>";
s += info[i].sender+" 对 "+info[i].receiver+" ";
s += info[i].expression+" "+info[i].msg+"("+info[i].add_time+")</p>";
//把已经获得记录的id赋值给,maxID
maxID = info[i].id;
}
var showmsg = document.getElementById("show_msg");
showmsg.innerHTML+=s;
//设置滚动条卷起的高度,保证滚动条始终在最下边显示
showmsg.scrollTop=showmsg.scrollHeight;
}
}
xhr.open('get','./data.php?maxID='+maxID);
//使用FormData无需设置header头
//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
//阻止浏览器默认动作 跳转
return false;
}
window.onload = function(){
showmessage();//获取初始聊天记录
setInterval("showmessage()", 2000);//获得最新聊天记录
}
</script>
</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="刷新名单"></input></li>
<li><input type="button" value="刷新屏幕"></input></li>
<li><input type="button" value="退出聊天"></input></li>
</ul>
</div>
<div id="right">
<div id="content">
<h2 id="content_title">有什么意见和建议欢迎大家踊跃提出</h2>
<hr/>
<div id="show_msg">
<p style="color: red">PHP爱好者聊天室公告:欢迎来到聊天室</p>
</div>
</div>
<div id="send">
<form>
<div id="control">
颜色:<select name="color">
<option value="">请选择</option>
<option style="color: #FF8888" value="#FF8888">爱的暗示</option>
<option style="color: #00BBFF" value="#00BBFF">忧郁的蓝</option>
</select>
表情:<select name="expression">
<option value="">请选择</option>
<option value="笑着">笑着</option>
<option value="幸福">幸福</option>
</select>
聊天对象:<select name="receiver">
<option value="">所有的人</option>
<option value="小明">小明</option>
<option value="小兰">小兰</option>
</select>
<br/>
<textarea id="msg" name="msg"></textarea>
<input type="button" value="发送" οnclick="sendmsg()"></input>
<span id="sendresult"></span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function sendmsg(){
var fm = document.getElementsByTagName('form')[0];
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
document.getElementById("sendresult").innerHTML=xhr.responseText;
//表单域信息归位
document.getElementsByTagName("select")[0].value="";
document.getElementsByTagName("select")[1].value="";
document.getElementsByTagName("select")[2].value="";
document.getElementById("msg").value="";
setTimeout("hideresult()", 2500);
}
}
xhr.open('post','./send.php');
//使用FormData无需设置header头
//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器默认动作 跳转
return false;
}
function hideresult(){
document.getElementById("sendresult").innerHTML="";
}
</script>
talk.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: 326px;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 solid white; }
数据库sql语句
CREATE TABLE message (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
msg VARCHAR(32) NOT NULL,
sender VARCHAR(6) NOT NULL,
receiver VARCHAR(6) NOT NULL,
color VARCHAR(10) NOT NULL,
expression VARCHAR(10) NOT NULL,
add_time date,
PRIMARY KEY(id));
服务器
data.php
<?php
$link = mysql_connect('localhost','root','newpassword');
mysql_select_db('talk',$link);
mysql_query('set names utf8');
//每次请求最新的聊天记录已经获取的不再获取避免重复
//本次请求的记录结果id需要大于上次已经获取记录的最大id
$maxID = $_GET['maxID'];
$sql = "select * from message where id > $maxID";
$qry = mysql_query($sql);
$info = array();
while ($rst = mysql_fetch_assoc($qry)) {
# code...
$info[]=$rst;
}
echo json_encode($info);
//接收表单信息并存储
//print_r($_POST);
?>
send.php
<?php
$link = mysql_connect('localhost','root','newpassword');
mysql_select_db('talk',$link);
mysql_query('set names utf8');
//每次请求最新的聊天记录已经获取的不再获取避免重复
//本次请求的记录结果id需要大于上次已经获取记录的最大id
//接收表单信息并存储
//print_r($_POST);
$msg = $_POST['msg'];
$color = $_POST['color'];
$expression = $_POST['expression'];
$receiver = $_POST['receiver'];
$sql = "insert into message values(null,'$msg','admin','$receiver','$color','$expression',now())";
if(mysql_query($sql))
{
echo "发表留言成功";
}else{
echo "发表留言失败";
}
?>