用jquery寫了一個超簡陋的ajax無刷新聊天室

滕王閣岳陽樓 2014-06-23

展開全文

現(xiàn)要只是實現(xiàn)了聊天室的基本聊天，ajax無刷新顯示功能，會員功能等正在制作中。
演示地址：http://www./chat

下載地址：http://www./show-34-1.html

sql:
CREATE TABLE `message` (
  `mid` int(20) NOT NULL auto_increment,
  `msg` varchar(255) NOT NULL,
  `user` varchar(50) NOT NULL,
  `time` int(10) NOT NULL,
  PRIMARY KEY  (`mid`),
  KEY `user` (`user`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=161 ;

CREATE TABLE `session` (
  `id` varchar(32) NOT NULL,
  `time` int(10) NOT NULL,
  `timenow` int(10) NOT NULL,
  `data` text NOT NULL,
  `ip` varchar(15) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

主要的三個頁面的代碼
index.php
[php]
<?php
//程序設計：℃凍番茄 QQ:7279915 E-mail:web@ www.
require_once("config.php");
?>
<!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<HEAD>
  <TITLE> chat </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/global.css" rel="stylesheet" type="text/css" />
  <SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<div id="main">
<div id="main_left" style="float:none;margin:0px auto;">
  <div id="chat_m" style="width:500px;height:500px;border:#cccccc 1px solid;overflow:auto;">Loading...</div>
<div id="main_l_from">
<FORM METHOD=POST ACTION="javascript:void(0)">
昵稱：<INPUT TYPE="text" NAME="user" id="user" size="8" value="<?=$_SESSION['user']?>"> 內(nèi)容:
<INPUT TYPE="text" NAME="message" id="message" style="width:250px;"> <INPUT TYPE="submit" name="sub" value="發(fā)言" id="sub">
</div></FORM>
</div>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<hr size=1>
<center>程序設計：℃凍番茄 QQ:7279915 E-mail:web@ <a href="http://www.">[url]www.</a[/url]> </center>
[/php]

chat.php
[php]
<?php
require_once("config.php");
//程序設計：℃凍番茄 QQ:7279915 E-mail:web@ www.
$fist=$db->getfirst("select `mid` from `message` order by `mid` desc ");
$mid=$fist['mid']-40; //初始化聊天記錄條數(shù)
$mid=$mid<=0?0:$mid;
$mid=0;
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="contents"></div>
<INPUT TYPE="text" style="display:none" NAME="mid" id="hide_mid" value="<?=$mid?>">
  <div id="end" style="width:400px;display:none;clear:both;"></div>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>

[/php]

ajax.php
[php]
<?php
require_once("config.php");
////程序設計：℃凍番茄 QQ:7279915 E-mail:web@ www.
//發(fā)信息
if($_GET['act']=='send'){
$msg=$_POST['msg'];
$user=$_POST['user'];
if(empty($msg) || empty($user)){
  $return['msg']='聊天內(nèi)容或昵稱不能為空';
}else{
  $time=time();
  if($db->insert("insert into `message` (`msg`,`user`,`time`) values ('$msg','$user','$time')")){
$return['msg']=true;
  }else{
$return['msg']="err";
  }
}
echo json_encode($return);
}elseif($_GET['act']=='display'){
if(isset($_POST['mid'])){
  $s=" where `mid`>'".$_POST['mid']."' ";
}else{
  $s='';
}
$sql="select * from `message` $s order by `mid`";
$total=$db->getcount($sql);
if($total==0){
  $a=0;
}else{
  $result=$db->query($sql);
  while($row=$db->getarray($result)){
$row['time1']=date('Y-m-d H:i:s',$row['time']);
$a[]=$row;
$b=$row['mid'];
  }
}
$ccc=array('list'=>$a,'mid'=>$b);
echo json_encode($ccc);
}
?>
[/php]