通过ajax和setInterval()函数，配合php+mysql实现一个简单的在线聊天室的功能。附带详细源码案例。这个聊天室是一个简单的聊天室，通过javascript setInterval()和ajax函数，不停的去获取服务器获取最新的聊天数据信息，并无刷新的写入到前台DOM中，来实现在线聊天的功能，这是一个比较笨的方法实现在线聊天室功能，不建议用于实际项目中。html代码：
实现一个简单的在线聊天室功能在线聊天
.chats { width:100%;max-height:295px;min-height:200px; height:auto; overflow-y:auto; }
.chatbtn { width:100%; padding:10px 10px; border-top:1px dashed #000;}
.chats .chatlist { width:100%; padding:10px 10px; min-height:24px; line-height:1.2; font-size:13px; text-align:left; }
.chats .chatlist .chattit { font-size:14px; }
.chats .chatlist .chattit span { margin-right:2px; }
.chats .chatlist .chatcon { font-size:13px; padding-left:10px; margin-top:6px;text-decoration: underline;}
发送
//js聊天代码
$(function(){
//获取聊天数据
setInterval(function(){
var star = $('#datachat').attr('data_num');
//判断是不是第一次加载，如果是第一次加载直接获取数据库最新的数据
//如果不是第一次加载，就不停的去获取服务器的最新聊天数据
if(star=='load'){
$.ajax({
url:'inc/chat.php?type=get_def',
type:'post',
cache:false,
dataType:'json',
success:function(data){
if(data !='error!'){
var clength = data.length-1;
for(var i=clength;i>=0;i--){
$(".chats").append("
$('#datachat').attr('data_num',data[i].id);
$(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},2000);
}
}
}
});
}else{
$.ajax({
url:'inc/chat.php?type=get_new',
type:'post',
cache:false,
dataType:'json',
data:{
'num':star
},
success:function(data){
if(data !='error!'){
var clength = data.length-1;
for(var i=clength;i>=0;i--){
$(".chats").append("
$('#datachat').attr('data_num',data[i].id);
$(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},700);
}
}
}
});
}
},1500);
//发送聊天数据
$('#chat_send').click(function(){
var chat_name = $('#name').val();
var chat_con = $('#con').val();
if(chat_name==''){
$('#name').val('昵称不可以为空！');
return false;
}else if(chat_name=='昵称不可以为空！'){
$('#name').val(' ');
return false;
}else if(chat_name.length<1){
$('#name').val('昵称太短!');
return false;
}else if(chat_name=='昵称太短!'){
$('#name').val(' ');
return false;
}
if(chat_con==''){
$('#con').val('内容不可以为空！');
return false;
}else if(chat_con=='内容不可以为空！'){
$('#con').val(' ');
return false;
}else if(chat_con.length<1){
$('#con').val('内容太短!');
return false;
}else if(chat_con=='内容太短!'){
$('#con').val(' ');
return false;
}
$.ajax({
url:'inc/chat.php?type=send',
type:'post',
cache:false,
dataType:'text',
data:{
'name':chat_name,
'con':chat_con
},
success:function(data){
if(data=='发送成功！'){
$('#chat_send').text('发送成功');
}else{
$('#chat_send').text('发送失败');
}
setTimeout(function(){
$('#chat_send').text('发送');
},1000);
},
error:function(){
alert('请求出错！');
}
});
});
});
php数据处理代码 chat.php：<?php
header("Conten-type:text/html;charset=utf-8");
require('../config.php');
require('getip.php');
if( $_SERVER['REQUEST_METHOD'] == "POST" ) {
if ($_GET['type'] == 'send') {
//添加聊天数据
$name = htmlspecialchars(addslashes(trim($_POST['name'])));
$con = htmlspecialchars(addslashes(trim($_POST['con'])));
if (empty($name) || empty($con)) {
echo "信息填写不完整。";
exit;
} else {
$ip = GetIpFrom();
$ips = $ip[0] .'-'. $ip[1];
if($dbh->exec("insert into chat (name,content,addtime,address) values('$name','$con',now(),'$ips')")>0){
echo '发送成功！';
exit;
}else{
echo '发送失败！';
exit;
}
}
}else if ($_GET['type'] == 'get_def'){
//获取数据
$res = $dbh->query("SELECT * FROM chat ORDER BY id DESC LIMIT 10");
$res = $res->fetchAll();
if($res){
echo json_encode($res);
exit;
}else{
echo 'error!';
exit;
}
}else if($_GET['type'] == 'get_new'){
$num = intval($_POST['num']);
$sql1 ="SELECT * FROM chat WHERE id>{$num} ORDER BY id DESC";
$res1 = $dbh -> query($sql1);
$res2 = $res1->fetchAll();
if($res2){
echo json_encode($res2);
exit;
}else{
echo 'error!';
exit;
}
}
}
?>mysql数据库结构：CREATE TABLE IF NOT EXISTS `chat` (
`id` int(8) NOT NULL AUTO_INCREMENT COMMENT 'id',
`name` char(10) NOT NULL COMMENT '昵称',
`content` varchar(255) NOT NULL COMMENT '内容',
`addtime` datetime NOT NULL COMMENT '发布时间',
`address` varchar(80) DEFAULT '未知' COMMENT 'ip地址',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='在线聊天' AUTO_INCREMENT=3 ;
ajax+php简单聊天室源码下载：
)
